zurb-foundation 3.1.0 → 3.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/lib/foundation/generators/layout_generator.rb +2 -0
- data/lib/foundation/generators/templates/application.html.slim +30 -0
- data/lib/foundation/version.rb +1 -1
- data/scss/foundation/common/_ratios.scss +1 -1
- data/scss/foundation/components/_grid.scss +1 -0
- data/scss/foundation/components/modules/_buttons.scss +12 -12
- data/scss/foundation/components/modules/_topbar.scss +16 -22
- data/scss/foundation/components/modules/_ui.scss +1 -1
- data/scss/foundation/mixins/_semantic-grid.scss +1 -1
- data/templates/project/scss/app.scss +4 -4
- data/test/orbit.html +17 -11
- data/test/reveal.html +22 -20
- data/test/scss/_settings.scss +3 -1
- data/test/tabs.html +30 -11
- data/test/topbar.html +3 -6
- data/vendor/assets/javascripts/foundation/app.js +1 -1
- data/vendor/assets/javascripts/foundation/index.js +1 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +7 -3
- data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +18 -13
- data/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js +22 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +14 -8
- data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js +5 -2
- metadata +5 -4
data/.gitignore
CHANGED
|
@@ -11,6 +11,8 @@ module Foundation
|
|
|
11
11
|
def create_layout
|
|
12
12
|
if options.haml?
|
|
13
13
|
template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
|
|
14
|
+
elsif
|
|
15
|
+
template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
|
|
14
16
|
else
|
|
15
17
|
template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
|
|
16
18
|
end
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
doctype html
|
|
2
|
+
== "<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->"
|
|
3
|
+
== "<!--[if lt IE 7 ]> <html class=\"ie6\" lang=\"en\"> <![endif]-->"
|
|
4
|
+
== "<!--[if IE 7 ]> <html class=\"ie7\" lang=\"en\"> <![endif]-->"
|
|
5
|
+
== "<!--[if IE 8 ]> <html class=\"ie8\" lang=\"en\"> <![endif]-->"
|
|
6
|
+
== "<!--[if IE 9 ]> <html class=\"ie9\" lang=\"en\"> <![endif]-->"
|
|
7
|
+
== "<!--[if (gt IE 9)|!(IE)]><!--> <html lang=\"en\"> <!--<![endif]-->"
|
|
8
|
+
|
|
9
|
+
head
|
|
10
|
+
meta charset="utf-8"
|
|
11
|
+
|
|
12
|
+
/ Uncomment to make IE8 render like IE7
|
|
13
|
+
/ meta http-equiv="X-UA-Compatible" content="IE=7"
|
|
14
|
+
|
|
15
|
+
/ Set the viewport width to device width for mobile
|
|
16
|
+
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
17
|
+
|
|
18
|
+
title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
19
|
+
|
|
20
|
+
/ Included CSS Files
|
|
21
|
+
= stylesheet_link_tag "application"
|
|
22
|
+
|
|
23
|
+
/ Included JS Files
|
|
24
|
+
= javascript_include_tag "application"
|
|
25
|
+
|
|
26
|
+
= csrf_meta_tag
|
|
27
|
+
|
|
28
|
+
body
|
|
29
|
+
.container
|
|
30
|
+
== yield
|
data/lib/foundation/version.rb
CHANGED
|
@@ -11,7 +11,7 @@ $minor-seventh: (16 / 9);
|
|
|
11
11
|
$major-sixth: (5 / 3);
|
|
12
12
|
$minor-sixth: (8 / 5);
|
|
13
13
|
$fifth: (3 / 2);
|
|
14
|
-
$augfourth: (1 / 1.4142135623730950488);
|
|
14
|
+
$augfourth: (1 / 1.4142135623730950488);
|
|
15
15
|
$fourth: (4 / 3);
|
|
16
16
|
$major-third: (5 / 4);
|
|
17
17
|
$minor-third: (6 / 5);
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
.row {
|
|
82
82
|
.mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
|
|
83
83
|
&:last-child { float: $defaultOpposite; }
|
|
84
|
+
&.end { float: $defaultFloat; }
|
|
84
85
|
}
|
|
85
86
|
&.collapse {
|
|
86
87
|
.mobile-#{convert-number-to-word($i)} { padding: 0; }
|
|
@@ -44,16 +44,16 @@
|
|
|
44
44
|
&.left-align { text-align: left; text-indent: 12px; }
|
|
45
45
|
|
|
46
46
|
/* Disabled ---------- */
|
|
47
|
-
&.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none);
|
|
47
|
+
&.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none);
|
|
48
48
|
:hover { background: $mainColor; }
|
|
49
|
-
|
|
50
|
-
&.success { background-color: $successColor;
|
|
49
|
+
|
|
50
|
+
&.success { background-color: $successColor;
|
|
51
51
|
&:hover { background-color: $successColor; }
|
|
52
52
|
}
|
|
53
|
-
&.alert { background-color: $alertColor;
|
|
53
|
+
&.alert { background-color: $alertColor;
|
|
54
54
|
&:hover { background-color: $alertColor; }
|
|
55
55
|
}
|
|
56
|
-
&.secondary { background-color: $secondaryColor;
|
|
56
|
+
&.secondary { background-color: $secondaryColor;
|
|
57
57
|
&:hover { background-color: $secondaryColor; }
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
&:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -6px; margin-top: -2px; }
|
|
134
134
|
}
|
|
135
135
|
&.secondary>span:after { @include cssTriangle(6px, darken(($secondaryColor), 80%), top); }
|
|
136
|
-
|
|
136
|
+
|
|
137
137
|
&.large span { width: $largeBtnBase * 3; }
|
|
138
138
|
&.small span { width: $smallBtnBase * 3; }
|
|
139
139
|
&.tiny span { width: $tinyBtnBase * 3; }
|
|
@@ -167,12 +167,12 @@
|
|
|
167
167
|
&.button, &.button.radius, &.button-rounded { @include border-radius(0px); }
|
|
168
168
|
}
|
|
169
169
|
&:first-child a {
|
|
170
|
-
&.button, &.button.radius {
|
|
171
|
-
&.button.rounded { @include border-corner-radius($defaultFloat, 1000px); }
|
|
170
|
+
&.button, &.button.radius { @include border-corner-radius(top, $defaultFloat, $buttonRadius); @include border-corner-radius(bottom, $defaultFloat, $buttonRadius); }
|
|
171
|
+
&.button.rounded { @include border-corner-radius(top, $defaultFloat, 1000px); @include border-corner-radius(bottom, $defaultFloat, 1000px); }
|
|
172
172
|
}
|
|
173
173
|
&:last-child a {
|
|
174
|
-
&.button, &.button.radius {
|
|
175
|
-
&.button.rounded { @include border-corner-radius($defaultOpposite, 1000px); }
|
|
174
|
+
&.button, &.button.radius { @include border-corner-radius(top, $defaultOpposite, $buttonRadius); @include border-corner-radius(bottom, $defaultOpposite, $buttonRadius); }
|
|
175
|
+
&.button.rounded { @include border-corner-radius(top, $defaultOpposite, 1000px); @include border-corner-radius(bottom, $defaultOpposite, 1000px); }
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
@@ -185,8 +185,8 @@
|
|
|
185
185
|
&.five-up li { width: 20%; }
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
|
-
|
|
189
|
-
@media only screen and (max-width: $screenSmall - 1) {
|
|
188
|
+
|
|
189
|
+
@media only screen and (max-width: $screenSmall - 1) {
|
|
190
190
|
.button-group {
|
|
191
191
|
button.button, input[type="submit"].button { width: auto; padding: $btnBase ($btnBase * 2) ($btnBase + 1);
|
|
192
192
|
&.large { padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
|
|
@@ -12,21 +12,20 @@
|
|
|
12
12
|
- <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search"
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
/* Element that controls breakpoint, no need to change this ever */
|
|
16
|
+
.top-bar-js-breakpoint { width: $topBarBreakPoint !important; visibility: hidden; }
|
|
17
|
+
|
|
18
|
+
/* Wrapped around .top-bar to contain to grid width */
|
|
19
|
+
.contain-to-grid { width: 100%; background: $topBarBgColor; }
|
|
20
|
+
|
|
21
|
+
/* Wrapped around .top-bar to make it fixed at the top */
|
|
22
|
+
.fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
|
|
23
|
+
|
|
15
24
|
/* <nav> */
|
|
16
25
|
.top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%;
|
|
17
26
|
|
|
18
27
|
/* Contain width to .row width */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/* Get the black bar to extend all the way */
|
|
22
|
-
&:before, &:after { background: $topBarBgColor; content:""; display: block; height: $topBarHeight; position: absolute; width: 1000px; }
|
|
23
|
-
&:before { left: -100%; }
|
|
24
|
-
&:after { right: -100%; }
|
|
25
|
-
|
|
26
|
-
/* Contained and fixed at the top */
|
|
27
|
-
&.fixed { left: 50%; margin-left: -($rowWidth / 2); position: fixed; }
|
|
28
|
-
ul li.name h1 a { padding-left: $columnGutter / 2; }
|
|
29
|
-
}
|
|
28
|
+
.contain-to-grid & { width: $rowWidth; margin: 0 auto; }
|
|
30
29
|
|
|
31
30
|
/* First <ul> for branding, title, name, etc */
|
|
32
31
|
&>ul {
|
|
@@ -105,10 +104,10 @@
|
|
|
105
104
|
}
|
|
106
105
|
|
|
107
106
|
/* Left Side <ul> */
|
|
108
|
-
&.left { float: left; width: auto; }
|
|
107
|
+
&.left { float: left; width: auto; margin-bottom: 0; }
|
|
109
108
|
|
|
110
109
|
/* Right Side <ul> */
|
|
111
|
-
&.right { float: right; width: auto;
|
|
110
|
+
&.right { float: right; width: auto; margin-bottom: 0;
|
|
112
111
|
/* Dropdown Right Side Alignment */
|
|
113
112
|
.has-dropdown .dropdown { left: auto; right: -1px;
|
|
114
113
|
li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
|
|
@@ -116,9 +115,6 @@
|
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
|
|
119
|
-
/* Style for when you add 'fixed' as a class to .top-bar */
|
|
120
|
-
&.fixed { left: 0; position: fixed; top: 0; z-index: 99; }
|
|
121
|
-
|
|
122
118
|
.js-generated { display: none; }
|
|
123
119
|
}
|
|
124
120
|
|
|
@@ -147,11 +143,7 @@
|
|
|
147
143
|
.js-generated { display: block; }
|
|
148
144
|
|
|
149
145
|
/* Override contain to grid stuff for breakpoint */
|
|
150
|
-
|
|
151
|
-
&:before, &:after { display: none; }
|
|
152
|
-
&.fixed { left: auto; margin-left: auto; position: static; }
|
|
153
|
-
}
|
|
154
|
-
&.fixed.expanded { height: auto; }
|
|
146
|
+
.contain-to-grid & { width: auto; }
|
|
155
147
|
|
|
156
148
|
/* Setting up the sliding area */
|
|
157
149
|
section { left: 0; position: relative; width: auto; @include single-transition(left, 300ms); }
|
|
@@ -162,7 +154,9 @@
|
|
|
162
154
|
|
|
163
155
|
/* Branding and name */
|
|
164
156
|
&.name { background: darken($topBarBgColor, 20%);
|
|
165
|
-
h1 { line-height: 1;
|
|
157
|
+
h1 { line-height: 1;
|
|
158
|
+
a { padding-left: $topBarHeight / 2; }
|
|
159
|
+
}
|
|
166
160
|
}
|
|
167
161
|
|
|
168
162
|
/* Dropdown Toggle */
|
|
@@ -329,7 +329,7 @@
|
|
|
329
329
|
|
|
330
330
|
/* Image Thumbnails ---------------------- */
|
|
331
331
|
.th { display: block;
|
|
332
|
-
img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(
|
|
332
|
+
img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(box-shadow); @include transition-duration(300ms); }
|
|
333
333
|
&:hover {
|
|
334
334
|
img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); }
|
|
335
335
|
}
|
|
@@ -11,12 +11,10 @@
|
|
|
11
11
|
// @import "compass/css3";
|
|
12
12
|
// @import "foundation/settings";
|
|
13
13
|
// @import "foundation/functions/all";
|
|
14
|
-
// @import "foundation/common/globals";
|
|
15
|
-
// @import "foundation/mixins/clearfix";
|
|
16
|
-
// @import "modular-scale";
|
|
17
14
|
|
|
18
15
|
// Control which mixins you have access too
|
|
19
16
|
|
|
17
|
+
// @import "foundation/mixins/clearfix";
|
|
20
18
|
// @import "foundation/mixins/css-triangle";
|
|
21
19
|
// @import "foundation/mixins/font-size";
|
|
22
20
|
|
|
@@ -25,6 +23,9 @@
|
|
|
25
23
|
// @import "foundation/mixins/respond-to";
|
|
26
24
|
// @import "foundation/mixins/semantic-grid";
|
|
27
25
|
|
|
26
|
+
// @import "foundation/common/globals";
|
|
27
|
+
// @import "modular-scale";
|
|
28
|
+
|
|
28
29
|
// Must include the grid for any responsiveness
|
|
29
30
|
|
|
30
31
|
// @import "foundation/components/grid";
|
|
@@ -44,4 +45,3 @@
|
|
|
44
45
|
// @import "foundation/components/modules/orbit";
|
|
45
46
|
// @import "foundation/components/modules/reveal";
|
|
46
47
|
// @import "foundation/components/modules/offcanvas";
|
|
47
|
-
|
data/test/orbit.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<![endif]-->
|
|
27
27
|
</head>
|
|
28
28
|
<body>
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
<div class="row">
|
|
31
31
|
<div class="twelve columns">
|
|
32
32
|
<p><a href="index.html">« Back</a></p>
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
<hr />
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
|
-
|
|
37
|
+
|
|
38
38
|
<!-- Test Foundation Components Here -->
|
|
39
39
|
<div class="row">
|
|
40
40
|
<div class="twelve columns">
|
|
41
41
|
<h3>Orbit</h3>
|
|
42
42
|
<h4 class="subheader">Orbit is an easy to use, powerful image slider built to be responsive, just like Foundation.</h4>
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
|
|
44
|
+
|
|
45
45
|
<div class="row">
|
|
46
46
|
<div class="four columns">
|
|
47
47
|
<h4>Image Slider</h4>
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
58
|
-
|
|
58
|
+
|
|
59
59
|
<div class="row">
|
|
60
60
|
<div class="four columns">
|
|
61
61
|
<h4>Content Slider</h4>
|
|
@@ -63,25 +63,28 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
<div class="eight columns">
|
|
65
65
|
<div id="featuredContent">
|
|
66
|
-
<div>
|
|
66
|
+
<div data-caption="#captionOne">
|
|
67
67
|
<h4>This is a content slider.</h4>
|
|
68
68
|
<p>Each slide holds arbitrary content, like text or actions.</p>
|
|
69
69
|
</div>
|
|
70
|
-
<div>
|
|
70
|
+
<div data-caption="#captionTwo">
|
|
71
71
|
<h4>We can include text and buttons, like this!</h4>
|
|
72
72
|
<p>We take no responsibility for what happens if you click this button.</p>
|
|
73
73
|
<p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
|
|
74
74
|
</div>
|
|
75
|
-
<div>
|
|
75
|
+
<div data-caption="#captionThree">
|
|
76
76
|
<h4>What? You didn't click it?</h4>
|
|
77
77
|
<p>We'll give you the benefit of the doubt. Maybe you did, and now you're back!</p>
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
80
|
+
<span class="orbit-caption" id="captionOne">Here is a caption...</span>
|
|
81
|
+
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
|
|
82
|
+
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
|
|
80
83
|
</div>
|
|
81
84
|
</div>
|
|
82
85
|
</div>
|
|
83
86
|
</div>
|
|
84
|
-
|
|
87
|
+
|
|
85
88
|
<!-- Included JS Files -->
|
|
86
89
|
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
87
90
|
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
@@ -98,9 +101,12 @@
|
|
|
98
101
|
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
99
102
|
<script type="text/javascript">
|
|
100
103
|
$(window).load(function(){
|
|
101
|
-
$("#featured").orbit(
|
|
104
|
+
$("#featured").orbit({
|
|
105
|
+
animation: 'fade',
|
|
106
|
+
resetTimerOnClick: true
|
|
107
|
+
});
|
|
102
108
|
$('#featuredContent').orbit({ fluid: '2x1' });
|
|
103
109
|
});
|
|
104
|
-
</script>
|
|
110
|
+
</script>
|
|
105
111
|
</body>
|
|
106
112
|
</html>
|
data/test/reveal.html
CHANGED
|
@@ -38,39 +38,41 @@
|
|
|
38
38
|
<h3>Reveal — Simple, Flexible Modal Dialogs</h3>
|
|
39
39
|
<h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
|
|
40
40
|
|
|
41
|
-
<p
|
|
41
|
+
<p>
|
|
42
|
+
<a href="#" data-reveal-id="exampleModal" class="radius button">
|
|
43
|
+
Example Modal…
|
|
44
|
+
</a>
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<p>
|
|
48
|
+
<a href="#" data-reveal-id="videoModal" class="radius button">
|
|
49
|
+
Example Modal w/Video…
|
|
50
|
+
</a>
|
|
51
|
+
</p>
|
|
42
52
|
|
|
43
53
|
</div>
|
|
44
54
|
</div>
|
|
45
55
|
|
|
46
56
|
<div id="exampleModal" class="reveal-modal">
|
|
47
|
-
|
|
57
|
+
<h2>This is a modal.</h2>
|
|
48
58
|
<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
59
|
<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…</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>
|
|
60
|
+
<p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
|
|
68
61
|
<a class="close-reveal-modal">×</a>
|
|
69
62
|
</div>
|
|
70
63
|
|
|
71
64
|
<div id="secondModal" class="reveal-modal">
|
|
72
65
|
<h2>This is a second modal.</h2>
|
|
73
66
|
<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>
|
|
67
|
+
<a class="close-reveal-modal">×</a>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div id="videoModal" class="reveal-modal large">
|
|
71
|
+
<h2>This modal has video</h2>
|
|
72
|
+
<div class="flex-video">
|
|
73
|
+
<iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
74
76
|
<a class="close-reveal-modal">×</a>
|
|
75
77
|
</div>
|
|
76
78
|
|
data/test/scss/_settings.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "foundation/common/ratios";
|
|
2
|
+
|
|
1
3
|
// // Settings file containing Foundation defaults
|
|
2
4
|
|
|
3
5
|
// // Grid Settings
|
|
@@ -81,7 +83,7 @@
|
|
|
81
83
|
|
|
82
84
|
// // Modular Scale Settings
|
|
83
85
|
|
|
84
|
-
//
|
|
86
|
+
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
|
85
87
|
// $baseFontSize: 14px !default;
|
|
86
88
|
// $importantModNum: 44px !default;
|
|
87
89
|
// $base-size: $baseFontSize $importantModNum;
|
data/test/tabs.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">« Back</a></p>
|
|
@@ -32,16 +32,17 @@
|
|
|
32
32
|
<dl class="sub-nav">
|
|
33
33
|
<dt>Go to:</dt>
|
|
34
34
|
<dd><a href="#simple-tabs">Simple Tabs</a></dd>
|
|
35
|
+
<dd><a href="#absolute-tabs">Absolutely Linked Tabs</a></dd>
|
|
35
36
|
<dd><a href="#tab-sizing">Tab Sizing</a></dd>
|
|
36
37
|
<dd><a href="#contained-tabs">Contained Tabs</a></dd>
|
|
37
38
|
<dd><a href="#pill-style-tables">Pill-Style Tabs</a></dd>
|
|
38
39
|
<dd><a href="#vertical-tabs">Vertical Tabs</a></dd>
|
|
39
40
|
<dd><a href="#mobile-tabs">Mobile Tabs</a></dd>
|
|
40
|
-
|
|
41
|
+
|
|
41
42
|
</dl>
|
|
42
43
|
</div>
|
|
43
44
|
</div>
|
|
44
|
-
|
|
45
|
+
|
|
45
46
|
<!-- Test Foundation Components Here -->
|
|
46
47
|
<div class="row">
|
|
47
48
|
<div class="twelve columns">
|
|
@@ -70,7 +71,25 @@
|
|
|
70
71
|
</ul>
|
|
71
72
|
</div>
|
|
72
73
|
</div>
|
|
73
|
-
|
|
74
|
+
|
|
75
|
+
<br><br>
|
|
76
|
+
|
|
77
|
+
<div class="row">
|
|
78
|
+
<div class="four columns">
|
|
79
|
+
<a name="absolute-tabs"></a>
|
|
80
|
+
<h4>Absolutely Linked Tabs</h4>
|
|
81
|
+
<p>Tabs can be linked to a path and used as navigation.</p>
|
|
82
|
+
</div>
|
|
83
|
+
<br>
|
|
84
|
+
<div class="eight columns">
|
|
85
|
+
<dl class="tabs">
|
|
86
|
+
<dd class="active"><a href="tabs.html">Tabs</a></dd>
|
|
87
|
+
<dd><a href="forms.html">Forms</a></dd>
|
|
88
|
+
<dd class="hide-for-small"><a href="elements.html">Elements</a></dd>
|
|
89
|
+
</dl>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
74
93
|
<br><br>
|
|
75
94
|
|
|
76
95
|
<div class="row">
|
|
@@ -96,7 +115,7 @@
|
|
|
96
115
|
</dl>
|
|
97
116
|
</div>
|
|
98
117
|
</div>
|
|
99
|
-
|
|
118
|
+
|
|
100
119
|
<br><br>
|
|
101
120
|
|
|
102
121
|
<div class="row">
|
|
@@ -121,7 +140,7 @@
|
|
|
121
140
|
</ul>
|
|
122
141
|
</div>
|
|
123
142
|
</div>
|
|
124
|
-
|
|
143
|
+
|
|
125
144
|
<br><br>
|
|
126
145
|
|
|
127
146
|
<div class="row">
|
|
@@ -139,7 +158,7 @@
|
|
|
139
158
|
</dl>
|
|
140
159
|
</div>
|
|
141
160
|
</div>
|
|
142
|
-
|
|
161
|
+
|
|
143
162
|
<div class="row">
|
|
144
163
|
<div class="four columns">
|
|
145
164
|
<a name="vertical-tabs"></a>
|
|
@@ -154,15 +173,15 @@
|
|
|
154
173
|
</dl>
|
|
155
174
|
</div>
|
|
156
175
|
</div>
|
|
157
|
-
|
|
158
|
-
|
|
176
|
+
|
|
177
|
+
|
|
159
178
|
<a name="mobile-tabs"></a>
|
|
160
179
|
<h4>Mobile Tabs</h4>
|
|
161
180
|
<p>If you want a standard, horizontal tab group to act vertical on small devices, adding a class of "mobile" to a standard (not vertical) tab group will switch them to full width nav bars on small screens.</p>
|
|
162
181
|
|
|
163
182
|
</div>
|
|
164
183
|
</div>
|
|
165
|
-
|
|
184
|
+
|
|
166
185
|
<!-- Included JS Files -->
|
|
167
186
|
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
168
187
|
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
@@ -179,6 +198,6 @@
|
|
|
179
198
|
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
180
199
|
<script type="text/javascript">
|
|
181
200
|
// Page-Specific JavaScript Goes Here
|
|
182
|
-
</script>
|
|
201
|
+
</script>
|
|
183
202
|
</body>
|
|
184
203
|
</html>
|
data/test/topbar.html
CHANGED
|
@@ -25,10 +25,8 @@
|
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<div class="six columns"> -->
|
|
31
|
-
<nav class="top-bar"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
|
|
28
|
+
<div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
|
|
29
|
+
<nav class="top-bar">
|
|
32
30
|
<ul>
|
|
33
31
|
<!-- Title Area -->
|
|
34
32
|
<li class="name">
|
|
@@ -147,8 +145,7 @@
|
|
|
147
145
|
</ul>
|
|
148
146
|
</section>
|
|
149
147
|
</nav>
|
|
150
|
-
|
|
151
|
-
</div> -->
|
|
148
|
+
</div>
|
|
152
149
|
|
|
153
150
|
<div class="row">
|
|
154
151
|
<div class="twelve columns">
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
$.fn.foundationButtons ? $doc.foundationButtons() : null;
|
|
9
9
|
$.fn.foundationAccordion ? $doc.foundationAccordion() : null;
|
|
10
10
|
$.fn.foundationNavigation ? $doc.foundationNavigation() : null;
|
|
11
|
-
$.fn.foundationTopBar ? $doc.foundationTopBar(
|
|
11
|
+
$.fn.foundationTopBar ? $doc.foundationTopBar() : null;
|
|
12
12
|
$.fn.foundationCustomForms ? $doc.foundationCustomForms() : null;
|
|
13
13
|
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
|
|
14
14
|
$.fn.foundationTabs ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
=require foundation/jquery.foundation.forms
|
|
9
9
|
=require foundation/jquery.foundation.tabs
|
|
10
10
|
=require foundation/jquery.foundation.navigation
|
|
11
|
+
=require foundation/jquery.foundation.topbar
|
|
11
12
|
=require foundation/jquery.foundation.reveal
|
|
12
13
|
=require foundation/jquery.foundation.orbit
|
|
13
14
|
=require foundation/jquery.foundation.mediaQueryToggle
|
|
@@ -369,7 +369,7 @@
|
|
|
369
369
|
if (false === $input.is(':disabled')) {
|
|
370
370
|
input.checked = ((input.checked) ? false : true);
|
|
371
371
|
$element.toggleClass('checked');
|
|
372
|
-
|
|
372
|
+
|
|
373
373
|
$input.trigger('change');
|
|
374
374
|
}
|
|
375
375
|
};
|
|
@@ -379,9 +379,13 @@
|
|
|
379
379
|
input = $input[0];
|
|
380
380
|
|
|
381
381
|
if (false === $input.is(':disabled')) {
|
|
382
|
-
|
|
382
|
+
|
|
383
383
|
$('input:radio[name="' + $input.attr('name') + '"]').next().not($element).removeClass('checked');
|
|
384
|
-
$element.
|
|
384
|
+
if ($element.hasClass('checked')) {
|
|
385
|
+
// Do Nothing
|
|
386
|
+
} else {
|
|
387
|
+
$element.toggleClass('checked');
|
|
388
|
+
}
|
|
385
389
|
input.checked = $element.hasClass('checked');
|
|
386
390
|
|
|
387
391
|
$input.trigger('change');
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
(function ($) {
|
|
11
11
|
'use strict';
|
|
12
|
-
|
|
12
|
+
|
|
13
13
|
$.fn.findFirstImage = function () {
|
|
14
14
|
return this.first()
|
|
15
15
|
.find('img')
|
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
afterSlideChange: $.noop, // empty function
|
|
41
41
|
afterLoadComplete: $.noop, //callback to execute after everything has been loaded
|
|
42
42
|
fluid: true,
|
|
43
|
-
centerBullets: true
|
|
43
|
+
centerBullets: true, // center bullet nav with js, turn this off if you want to position the bullet nav manually
|
|
44
|
+
singleCycle: false // cycles through orbit slides only once
|
|
44
45
|
},
|
|
45
46
|
|
|
46
47
|
activeSlide: 0,
|
|
@@ -77,8 +78,8 @@
|
|
|
77
78
|
|
|
78
79
|
this.$element = $(element);
|
|
79
80
|
this.$wrapper = this.$element.wrap(this.wrapperHTML).parent();
|
|
80
|
-
this.$slides = this.$element.children('img, a, div');
|
|
81
|
-
|
|
81
|
+
this.$slides = this.$element.children('img, a, div, figure');
|
|
82
|
+
|
|
82
83
|
this.$element.bind('orbit.next', function () {
|
|
83
84
|
self.shift('next');
|
|
84
85
|
});
|
|
@@ -117,7 +118,7 @@
|
|
|
117
118
|
this.$element
|
|
118
119
|
.addClass('orbit')
|
|
119
120
|
.css({width: '1px', height: '1px'});
|
|
120
|
-
|
|
121
|
+
|
|
121
122
|
this.$slides.addClass('orbit-slide');
|
|
122
123
|
|
|
123
124
|
this.setDimentionsFromLargestSlide();
|
|
@@ -154,7 +155,7 @@
|
|
|
154
155
|
//Collect all slides and set slider size of largest image
|
|
155
156
|
var self = this,
|
|
156
157
|
$fluidPlaceholder;
|
|
157
|
-
|
|
158
|
+
|
|
158
159
|
self.$element.add(self.$wrapper).width(this.$slides.first().outerWidth());
|
|
159
160
|
self.$element.add(self.$wrapper).height(this.$slides.first().height());
|
|
160
161
|
self.orbitWidth = this.$slides.first().outerWidth();
|
|
@@ -186,11 +187,11 @@
|
|
|
186
187
|
//var inner = $("<div/>").css({"display":"inline-block", "width":"2px", "height":"2px"});
|
|
187
188
|
//$fluidPlaceholder = $("<div/>").css({"float":"left"});
|
|
188
189
|
//$fluidPlaceholder.wrapInner(inner);
|
|
189
|
-
|
|
190
|
+
|
|
190
191
|
//$fluidPlaceholder = $("<div/>").css({"height":"1px", "width":"2px"});
|
|
191
192
|
//$fluidPlaceholder = $("<div style='display:inline-block;width:2px;height:1px;'></div>");
|
|
192
193
|
}
|
|
193
|
-
|
|
194
|
+
|
|
194
195
|
self.$element.prepend($fluidPlaceholder);
|
|
195
196
|
$fluidPlaceholder.addClass('fluid-placeholder');
|
|
196
197
|
self.$element.add(self.$wrapper).css({width: 'inherit'});
|
|
@@ -579,6 +580,10 @@
|
|
|
579
580
|
|
|
580
581
|
this.setCaption();
|
|
581
582
|
}
|
|
583
|
+
|
|
584
|
+
if (this.$slides.last() && this.options.singleCycle) {
|
|
585
|
+
this.stopClock();
|
|
586
|
+
}
|
|
582
587
|
}
|
|
583
588
|
};
|
|
584
589
|
|
|
@@ -654,7 +659,7 @@ Commercial use requires attribution.
|
|
|
654
659
|
|
|
655
660
|
var Holder = Holder || {};
|
|
656
661
|
(function (app, win) {
|
|
657
|
-
|
|
662
|
+
|
|
658
663
|
var preempted = false,
|
|
659
664
|
fallback = false,
|
|
660
665
|
canvas = document.createElement('canvas');
|
|
@@ -785,7 +790,7 @@ app.run = function (o) {
|
|
|
785
790
|
var options = extend(settings, o),
|
|
786
791
|
images = selector(options.images),
|
|
787
792
|
preempted = true;
|
|
788
|
-
|
|
793
|
+
|
|
789
794
|
for (var l = images.length, i = 0; i < l; i++) {
|
|
790
795
|
var theme = settings.themes.gray;
|
|
791
796
|
var src = images[i].getAttribute("data-src") || images[i].getAttribute("src");
|
|
@@ -811,16 +816,16 @@ app.run = function (o) {
|
|
|
811
816
|
images[i].setAttribute("data-src", src);
|
|
812
817
|
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
|
813
818
|
images[i].setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
|
814
|
-
|
|
819
|
+
|
|
815
820
|
// Fallback
|
|
816
821
|
// images[i].style.width = dimensions.width + "px";
|
|
817
822
|
// images[i].style.height = dimensions.height + "px";
|
|
818
823
|
images[i].style.backgroundColor = theme.background;
|
|
819
|
-
|
|
824
|
+
|
|
820
825
|
var theme = (text ? extend(theme, {
|
|
821
826
|
text: text
|
|
822
827
|
}) : theme);
|
|
823
|
-
|
|
828
|
+
|
|
824
829
|
if (!fallback) {
|
|
825
830
|
images[i].setAttribute("src", draw(ctx, dimensions, theme));
|
|
826
831
|
}
|
|
@@ -446,12 +446,23 @@
|
|
|
446
446
|
|
|
447
447
|
}// end openAnimation
|
|
448
448
|
|
|
449
|
+
|
|
450
|
+
function openVideos() {
|
|
451
|
+
var video = modal.find('.flex-video'),
|
|
452
|
+
iframe = video.find('iframe');
|
|
453
|
+
if (iframe.length > 0) {
|
|
454
|
+
iframe.attr("src", iframe.data("src"));
|
|
455
|
+
video.fadeIn(100);
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
|
|
449
459
|
//
|
|
450
460
|
// Bind the reveal 'open' event.
|
|
451
461
|
// When the event is triggered, openAnimation is called
|
|
452
462
|
// along with any function set in the options.open property.
|
|
453
463
|
//
|
|
454
464
|
modal.bind( 'reveal:open.reveal', openAnimation );
|
|
465
|
+
modal.bind( 'reveal:open.reveal', openVideos);
|
|
455
466
|
|
|
456
467
|
/**
|
|
457
468
|
* Closes the modal element(s)
|
|
@@ -668,10 +679,21 @@
|
|
|
668
679
|
|
|
669
680
|
}
|
|
670
681
|
|
|
682
|
+
function closeVideos() {
|
|
683
|
+
var video = modal.find('.flex-video'),
|
|
684
|
+
iframe = video.find('iframe');
|
|
685
|
+
if (iframe.length > 0) {
|
|
686
|
+
iframe.data("src", iframe.attr("src"));
|
|
687
|
+
iframe.attr("src", "");
|
|
688
|
+
video.fadeOut(100);
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
|
|
671
692
|
//
|
|
672
693
|
// Bind the modal 'close' event
|
|
673
694
|
//
|
|
674
695
|
modal.bind( 'reveal:close.reveal', closeAnimation );
|
|
696
|
+
modal.bind( 'reveal:closed.reveal', closeVideos );
|
|
675
697
|
//
|
|
676
698
|
// Bind the modal 'opened' + 'closed' event
|
|
677
699
|
// Calls the unlockModal method.
|
|
@@ -9,18 +9,24 @@
|
|
|
9
9
|
|
|
10
10
|
var activateTab = function ($tab) {
|
|
11
11
|
var $activeTab = $tab.closest('dl').find('dd.active'),
|
|
12
|
-
|
|
12
|
+
target = $tab.children('a').attr("href"),
|
|
13
|
+
hasHash = /^#/.test(target),
|
|
14
|
+
contentLocation = '';
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
if (hasHash) {
|
|
17
|
+
contentLocation = target + 'Tab';
|
|
18
|
+
|
|
19
|
+
// Strip off the current url that IE adds
|
|
20
|
+
contentLocation = contentLocation.replace(/^.+#/, '#');
|
|
21
|
+
|
|
22
|
+
//Show Tab Content
|
|
23
|
+
$(contentLocation).closest('.tabs-content').children('li').removeClass('active').hide();
|
|
24
|
+
$(contentLocation).css('display', 'block').addClass('active');
|
|
25
|
+
}
|
|
16
26
|
|
|
17
27
|
//Make Tab Active
|
|
18
28
|
$activeTab.removeClass('active');
|
|
19
29
|
$tab.addClass('active');
|
|
20
|
-
|
|
21
|
-
//Show Tab Content
|
|
22
|
-
$(contentLocation).closest('.tabs-content').children('li').removeClass('active').hide();
|
|
23
|
-
$(contentLocation).css('display', 'block').addClass('active');
|
|
24
30
|
};
|
|
25
31
|
|
|
26
32
|
$(document).on('click.fndtn', 'dl.tabs dd a', function (event){
|
|
@@ -34,4 +40,4 @@
|
|
|
34
40
|
|
|
35
41
|
};
|
|
36
42
|
|
|
37
|
-
})(jQuery, this);
|
|
43
|
+
})(jQuery, this);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* jQuery Foundation Top Bar 2.0
|
|
2
|
+
* jQuery Foundation Top Bar 2.0.1
|
|
3
3
|
* http://foundation.zurb.com
|
|
4
4
|
* Copyright 2012, ZURB
|
|
5
5
|
* Free to use under the MIT license.
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
|
|
14
14
|
var settings = {
|
|
15
15
|
index : 0,
|
|
16
|
-
breakPoint : 940, // Set to to 9999 to force it into responsive always
|
|
17
16
|
initialized : false
|
|
18
17
|
},
|
|
19
18
|
methods = {
|
|
@@ -23,6 +22,9 @@
|
|
|
23
22
|
settings.$w = $(window),
|
|
24
23
|
settings.$topbar = $('nav.top-bar');
|
|
25
24
|
settings.$titlebar = settings.$topbar.children('ul:first');
|
|
25
|
+
var breakpoint = $("<div class='top-bar-js-breakpoint'/>").appendTo("body");
|
|
26
|
+
settings.breakPoint = breakpoint.width();
|
|
27
|
+
breakpoint.remove();
|
|
26
28
|
|
|
27
29
|
if (!settings.initialized) {
|
|
28
30
|
methods.assemble();
|
|
@@ -39,6 +41,7 @@
|
|
|
39
41
|
if (methods.breakpoint()) {
|
|
40
42
|
settings.$topbar.toggleClass('expanded');
|
|
41
43
|
settings.$topbar.css('min-height', '');
|
|
44
|
+
|
|
42
45
|
}
|
|
43
46
|
});
|
|
44
47
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: zurb-foundation
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.1.
|
|
4
|
+
version: 3.1.1
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2012-09-
|
|
12
|
+
date: 2012-09-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass
|
|
@@ -99,6 +99,7 @@ files:
|
|
|
99
99
|
- lib/foundation/generators/layout_generator.rb
|
|
100
100
|
- lib/foundation/generators/templates/application.html.erb
|
|
101
101
|
- lib/foundation/generators/templates/application.html.haml
|
|
102
|
+
- lib/foundation/generators/templates/application.html.slim
|
|
102
103
|
- lib/foundation/version.rb
|
|
103
104
|
- lib/zurb-foundation.rb
|
|
104
105
|
- scss/foundation.scss
|
|
@@ -197,7 +198,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
197
198
|
version: '0'
|
|
198
199
|
segments:
|
|
199
200
|
- 0
|
|
200
|
-
hash:
|
|
201
|
+
hash: 2417406268822992895
|
|
201
202
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
202
203
|
none: false
|
|
203
204
|
requirements:
|
|
@@ -206,7 +207,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
206
207
|
version: '0'
|
|
207
208
|
segments:
|
|
208
209
|
- 0
|
|
209
|
-
hash:
|
|
210
|
+
hash: 2417406268822992895
|
|
210
211
|
requirements: []
|
|
211
212
|
rubyforge_project:
|
|
212
213
|
rubygems_version: 1.8.23
|