zurb-foundation 3.1.0 → 3.1.1
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.
- 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
|