ZURB-foundation 2.1.3.3 → 2.1.4
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/README.mkdn +16 -2
- data/lib/ZURB-foundation.rb +2 -2
- data/stylesheets/ZURB/_buttons.sass +101 -0
- data/stylesheets/ZURB/_forms.sass +26 -12
- data/stylesheets/ZURB/_globals.sass +53 -24
- data/stylesheets/ZURB/_grid.sass +105 -102
- data/stylesheets/ZURB/_mobile.sass +61 -27
- data/stylesheets/ZURB/_orbit.sass +87 -22
- data/stylesheets/ZURB/_reveal.sass +20 -19
- data/stylesheets/ZURB/_typography.sass +18 -8
- data/stylesheets/ZURB/_ui.sass +45 -123
- data/stylesheets/ZURB/includes/_colors.sass +5 -1
- data/stylesheets/ZURB/includes/_mixins.sass +10 -6
- data/stylesheets/ZURB/includes/_settings.sass +43 -3
- data/stylesheets/_ZURB-foundation.sass +13 -0
- data/templates/project/index.html +2 -11
- data/templates/project/javascripts/app.js +25 -26
- data/templates/project/javascripts/jquery.customforms.js +65 -13
- data/templates/project/javascripts/modernizr.foundation.js +4 -0
- data/templates/project/manifest.rb +3 -2
- data/templates/project/sass/app.sass +9 -21
- data/templates/project/sass/ie.sass +4 -4
- metadata +7 -5
- data/stylesheets/ZURB/_foundation.sass +0 -9
@@ -1,9 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
// Mobile Grid Fixes
|
2
|
+
//---------------------------------------------------
|
3
|
+
|
4
|
+
// Typography
|
5
|
+
//---------------------------------------------------
|
5
6
|
|
6
|
-
/* Typography */
|
7
7
|
@media only screen and (max-width: 767px)
|
8
8
|
h1
|
9
9
|
+font-size(32)
|
@@ -27,9 +27,11 @@
|
|
27
27
|
+font-size(15)
|
28
28
|
line-height: 1.4
|
29
29
|
|
30
|
-
|
31
|
-
|
32
|
-
|
30
|
+
// Tablet
|
31
|
+
//---------------------------------------------------
|
32
|
+
|
33
|
+
// Currently unused
|
34
|
+
// @media only screen and (device-width: 768px), (device-width: 800)
|
33
35
|
|
34
36
|
@media only screen and (max-width: 767px)
|
35
37
|
body
|
@@ -62,7 +64,8 @@
|
|
62
64
|
.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered
|
63
65
|
margin-left: 0% !important
|
64
66
|
|
65
|
-
|
67
|
+
// Mobile 4-column Grid
|
68
|
+
//----------------------------------------------------------------------------------------------------
|
66
69
|
.row
|
67
70
|
.phone-one.column:first-child, .phone-two.column:first-child, .phone-three.column:first-child, .phone-four.column:first-child, .phone-one.columns:first-child, .phone-two.columns:first-child, .phone-three.columns:first-child, .phone-four.columns:first-child
|
68
71
|
margin-left: 0
|
@@ -80,19 +83,19 @@
|
|
80
83
|
width: 73.9% !important
|
81
84
|
.phone-four.columns
|
82
85
|
width: 100% !important
|
83
|
-
|
84
|
-
|
85
86
|
|
86
|
-
|
87
|
+
// Block Grid
|
88
|
+
//----------------------------------------------------------------------------------------------------
|
87
89
|
@media only screen and (max-width: 767px)
|
88
90
|
.block-grid.mobile
|
89
91
|
margin-left: 0%
|
90
|
-
li
|
92
|
+
&>li
|
91
93
|
float: none
|
92
94
|
width: 100%
|
93
95
|
margin-left: 0%
|
94
|
-
|
95
|
-
|
96
|
+
|
97
|
+
// Mobile Visibility Affordances
|
98
|
+
//----------------------------------------------------------------------------------------------------
|
96
99
|
.show-on-phones
|
97
100
|
display: none !important
|
98
101
|
.show-on-tablets
|
@@ -121,7 +124,25 @@
|
|
121
124
|
display: block !important
|
122
125
|
.show-on-desktops
|
123
126
|
display: none !important
|
124
|
-
|
127
|
+
|
128
|
+
// Modernizr-enabled tablet targeting
|
129
|
+
//-------------------------------------------------
|
130
|
+
|
131
|
+
@media only screen and (max-width: 1280px) and (min-width: 768px)
|
132
|
+
.touch
|
133
|
+
.hide-on-phones
|
134
|
+
display: block !important
|
135
|
+
.hide-on-tablets
|
136
|
+
display: none !important
|
137
|
+
.hide-on-desktops
|
138
|
+
display: block !important
|
139
|
+
.show-on-phones
|
140
|
+
display: none !important
|
141
|
+
.show-on-tablets
|
142
|
+
display: block !important
|
143
|
+
.show-on-desktops
|
144
|
+
display: none !important
|
145
|
+
|
125
146
|
@media only screen and (max-width: 767px)
|
126
147
|
.hide-on-phones
|
127
148
|
display: none !important
|
@@ -137,7 +158,12 @@
|
|
137
158
|
.show-on-desktops
|
138
159
|
display: none !important
|
139
160
|
|
140
|
-
|
161
|
+
// Specific overrides
|
162
|
+
//----------------------------------------------------------------------------------------------------
|
163
|
+
|
164
|
+
//
|
165
|
+
// For elements that require something other than display: block
|
166
|
+
//
|
141
167
|
|
142
168
|
table
|
143
169
|
&.show-on-desktops
|
@@ -165,7 +191,9 @@ table
|
|
165
191
|
&.show-on-phones
|
166
192
|
display: block !important
|
167
193
|
|
168
|
-
|
194
|
+
// Forms
|
195
|
+
//----------------------------------------------------------------------------------------------------
|
196
|
+
|
169
197
|
@media only screen and (max-width: 767px)
|
170
198
|
input.input-text, input.input-text.oversize, textarea, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
|
171
199
|
display: block
|
@@ -180,7 +208,9 @@ table
|
|
180
208
|
form.nice .small+.error, form.nice .medium+.error, form.nice .large+.error
|
181
209
|
width: auto
|
182
210
|
|
183
|
-
|
211
|
+
// Buttons
|
212
|
+
//----------------------------------------------------------------------------------------------------
|
213
|
+
|
184
214
|
@media only screen and (max-width: 767px)
|
185
215
|
.button
|
186
216
|
display: block
|
@@ -189,7 +219,9 @@ table
|
|
189
219
|
padding-left: 0
|
190
220
|
padding-right: 0
|
191
221
|
|
192
|
-
|
222
|
+
// Tabs
|
223
|
+
//----------------------------------------------------------------------------------------------------
|
224
|
+
|
193
225
|
@media only screen and (max-width: 767px)
|
194
226
|
dl.tabs.mobile, dl.nice.tabs.mobile
|
195
227
|
width: auto
|
@@ -244,18 +276,18 @@ table
|
|
244
276
|
dl.nice.contained.tabs.mobile dd a
|
245
277
|
padding: 18px 20px
|
246
278
|
|
247
|
-
|
279
|
+
// Nav Bar with Dropdowns
|
248
280
|
.nav-bar
|
249
281
|
height: auto
|
250
|
-
|
282
|
+
& > li
|
251
283
|
float: none
|
252
284
|
display: block
|
253
|
-
|
285
|
+
& > a
|
254
286
|
text-align: left
|
255
287
|
border-top: 1px solid #ddd
|
256
288
|
border-right: none
|
257
289
|
&.has-flyout
|
258
|
-
|
290
|
+
& > a
|
259
291
|
&:after
|
260
292
|
content: ""
|
261
293
|
width: 0
|
@@ -265,10 +297,10 @@ table
|
|
265
297
|
border-top: 4px solid #2a85e8
|
266
298
|
display: block
|
267
299
|
&:first-child
|
268
|
-
|
300
|
+
& > a
|
269
301
|
border-top: none
|
270
302
|
&:hover
|
271
|
-
|
303
|
+
& > a
|
272
304
|
font-weight: bold
|
273
305
|
ul
|
274
306
|
position: relative
|
@@ -286,7 +318,9 @@ table
|
|
286
318
|
p.last-child
|
287
319
|
margin-bottom: 18px
|
288
320
|
|
289
|
-
|
321
|
+
// Video
|
322
|
+
//----------------------------------------------------------------------------------------------------
|
323
|
+
|
290
324
|
@media 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)
|
291
325
|
.video
|
292
326
|
padding-top: 0
|
@@ -1,18 +1,27 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
1
|
+
// CSS for jQuery Orbit Plugin 1.2.3 - http://www.zurb.com/playground
|
2
|
+
// Copyright 2010, ZURB - Free to use under the MIT license - http://www.opensource.org/licenses/mit-license.php
|
3
|
+
//
|
4
|
+
// Configure the slider ID by setting $orbit-slider-id
|
5
|
+
|
6
|
+
// Orbit Slider
|
7
|
+
//----------------------------------------------------------------------------------------------------
|
8
|
+
|
9
|
+
// Orbit slider mixin
|
10
|
+
@mixin orbit-slider($width: 940px, $height: 450px)
|
11
|
+
width: $width
|
12
|
+
height: $height
|
10
13
|
background: #000 image-url('orbit/loading.gif') no-repeat center center
|
11
14
|
overflow: hidden
|
12
|
-
|
15
|
+
& > img, & > div, & > a
|
13
16
|
display: none
|
14
17
|
|
15
|
-
|
18
|
+
@if $include-default-orbit-slider-id
|
19
|
+
##{$orbit-slider-id}
|
20
|
+
@include orbit-slider()
|
21
|
+
|
22
|
+
// Orbit container
|
23
|
+
//----------------------------------------------------------------------------------------------------
|
24
|
+
|
16
25
|
div.orbit-wrapper
|
17
26
|
width: 1px
|
18
27
|
height: 1px
|
@@ -24,20 +33,30 @@ div.orbit
|
|
24
33
|
overflow: hidden
|
25
34
|
&.with-bullets
|
26
35
|
margin-bottom: 40px
|
27
|
-
|
36
|
+
& > img
|
28
37
|
position: absolute
|
29
38
|
top: 0
|
30
39
|
left: 0
|
31
|
-
|
40
|
+
& > a
|
32
41
|
border: none
|
33
42
|
position: absolute
|
34
43
|
top: 0
|
35
44
|
left: 0
|
36
45
|
line-height: 0
|
37
46
|
display: none
|
47
|
+
&>div
|
48
|
+
position: absolute
|
49
|
+
top: 0
|
50
|
+
left: 0
|
51
|
+
width: 100%
|
52
|
+
height: 100%
|
53
|
+
|
54
|
+
// Orbit timer
|
55
|
+
//----------------------------------------------------------------------------------------------------
|
56
|
+
//
|
57
|
+
// If your slider only uses content or anchors, you're going to want to put the width and height
|
58
|
+
// declarations on the .orbit > div and div.orbit > a tags in addition to just the .orbit-wrapper
|
38
59
|
|
39
|
-
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
|
40
|
-
/* Timer */
|
41
60
|
div.timer
|
42
61
|
width: 40px
|
43
62
|
height: 40px
|
@@ -86,8 +105,10 @@ span.pause
|
|
86
105
|
background: image-url('orbit/pause-black.png') no-repeat 0 -40
|
87
106
|
div.timer:hover span.pause, span.pause.active
|
88
107
|
+opacity(1)
|
89
|
-
|
90
|
-
|
108
|
+
|
109
|
+
// Orbit captions
|
110
|
+
//----------------------------------------------------------------------------------------------------
|
111
|
+
|
91
112
|
.orbit-caption
|
92
113
|
display: none
|
93
114
|
+HelveticaFontStack
|
@@ -103,8 +124,10 @@ div.timer:hover span.pause, span.pause.active
|
|
103
124
|
right: 0
|
104
125
|
bottom: 0
|
105
126
|
width: 100%
|
106
|
-
|
107
|
-
|
127
|
+
|
128
|
+
// Directional Nav
|
129
|
+
//----------------------------------------------------------------------------------------------------
|
130
|
+
|
108
131
|
div.slider-nav
|
109
132
|
display: block
|
110
133
|
span
|
@@ -123,7 +146,9 @@ div.slider-nav
|
|
123
146
|
background: image-url('orbit/left-arrow.png')
|
124
147
|
left: 0
|
125
148
|
|
126
|
-
|
149
|
+
// Bullet Nav
|
150
|
+
//----------------------------------------------------------------------------------------------------
|
151
|
+
|
127
152
|
.orbit-bullets
|
128
153
|
position: absolute
|
129
154
|
z-index: 1000
|
@@ -152,5 +177,45 @@ div.slider-nav
|
|
152
177
|
&.active
|
153
178
|
&.has-thumb
|
154
179
|
background-position: 0 0
|
155
|
-
border-top: solid 2px $black
|
156
|
-
|
180
|
+
border-top: solid 2px $black
|
181
|
+
|
182
|
+
// Fluid Layout
|
183
|
+
//-------------------------------------------------------------------------------------
|
184
|
+
|
185
|
+
.orbit .fluid-placeholder
|
186
|
+
visibility: hidden
|
187
|
+
position: static
|
188
|
+
display: block
|
189
|
+
width: 100%
|
190
|
+
.orbit, .orbit-wrapper
|
191
|
+
width: 100% !important
|
192
|
+
|
193
|
+
.orbit-bullets
|
194
|
+
position: absolute
|
195
|
+
z-index: 1000
|
196
|
+
list-style: none
|
197
|
+
bottom: -50px
|
198
|
+
left: 50%
|
199
|
+
margin-left: -50px
|
200
|
+
padding: 0
|
201
|
+
li
|
202
|
+
float: left
|
203
|
+
margin-left: 5px
|
204
|
+
cursor: pointer
|
205
|
+
color: #999
|
206
|
+
text-indent: -9999px
|
207
|
+
background: image-url('orbit/bullets.jpg') no-repeat 4px 0
|
208
|
+
width: 13px
|
209
|
+
height: 12px
|
210
|
+
overflow: hidden
|
211
|
+
&.has-thumb
|
212
|
+
background: none
|
213
|
+
width: 100px
|
214
|
+
height: 75px
|
215
|
+
&.active
|
216
|
+
color: #222
|
217
|
+
background-position: -8px 0
|
218
|
+
&.has-thumb
|
219
|
+
background-position: 0 0
|
220
|
+
border-top: 2px solid #000
|
221
|
+
|
@@ -1,7 +1,19 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
// CSS for jQuery Reveal Plugin - http://www.zurb.com/playground
|
2
|
+
//
|
3
|
+
// The modal's close button entity is ×
|
4
|
+
//
|
5
|
+
// Example markup:
|
6
|
+
//
|
7
|
+
// <div id="myModal" class="reveal-modal">
|
8
|
+
// <h2>Awesome. I have it.</h2>
|
9
|
+
// <p class="lead">Your couch. I it's mine.</p>
|
10
|
+
// <p>Lorem ipsum dolor sit amet ...</p>
|
11
|
+
// <a class="close-reveal-modal">×</a>
|
12
|
+
// </div>
|
13
|
+
|
14
|
+
// Reveal Modals
|
15
|
+
//----------------------------------------------------------------------------------------------------
|
16
|
+
|
5
17
|
.reveal-modal-bg
|
6
18
|
position: fixed
|
7
19
|
height: 100%
|
@@ -50,7 +62,9 @@
|
|
50
62
|
.row
|
51
63
|
min-width: 0
|
52
64
|
|
53
|
-
|
65
|
+
// Reveal mobile
|
66
|
+
//----------------------------------------------------------------------------------------------------
|
67
|
+
|
54
68
|
@media only screen and (device-width: 768px), (device-width: 800)
|
55
69
|
.reveal-modal-bg
|
56
70
|
position: absolute
|
@@ -72,17 +86,4 @@
|
|
72
86
|
left: 5%
|
73
87
|
margin-left: 0
|
74
88
|
padding: 5%
|
75
|
-
height: auto
|
76
|
-
|
77
|
-
|
78
|
-
/* NOTES */
|
79
|
-
/* Close button entity is × */
|
80
|
-
|
81
|
-
/* Example markup */
|
82
|
-
/* <div id="myModal" class="reveal-modal"> */
|
83
|
-
/* <h2>Awesome. I have it.</h2> */
|
84
|
-
/* <p class="lead">Your couch. I it's mine.</p> */
|
85
|
-
/* <p>Lorem ipsum dolor sit amet...</p> */
|
86
|
-
/* <a class="close-reveal-modal">×</a> */
|
87
|
-
/* </div> */
|
88
|
-
|
89
|
+
height: auto
|
@@ -1,7 +1,7 @@
|
|
1
|
-
|
1
|
+
// Typography
|
2
|
+
//----------------------------------------------------------------------------------------------------
|
2
3
|
|
3
|
-
|
4
|
-
h1,h2,h3,h4,h5,h6
|
4
|
+
#{headings(all)}
|
5
5
|
color: #181818
|
6
6
|
font-weight: bold
|
7
7
|
line-height: 1.25
|
@@ -9,6 +9,7 @@ h1,h2,h3,h4,h5,h6
|
|
9
9
|
color: #777
|
10
10
|
a
|
11
11
|
font-weight: inherit
|
12
|
+
|
12
13
|
h1
|
13
14
|
+font-size(46)
|
14
15
|
margin-bottom: 12px
|
@@ -29,7 +30,7 @@ h6
|
|
29
30
|
+font-size(15)
|
30
31
|
font-weight: normal
|
31
32
|
|
32
|
-
.
|
33
|
+
.subheader
|
33
34
|
color: #777
|
34
35
|
font-weight: 300
|
35
36
|
margin-bottom: 24px
|
@@ -53,7 +54,8 @@ small
|
|
53
54
|
font-size: 60%
|
54
55
|
line-height: inherit
|
55
56
|
|
56
|
-
|
57
|
+
// Blockquotes
|
58
|
+
//--------------------------------------------
|
57
59
|
blockquote
|
58
60
|
line-height: 20px
|
59
61
|
color: #777
|
@@ -87,11 +89,19 @@ abbr, acronym
|
|
87
89
|
cursor: help
|
88
90
|
abbr
|
89
91
|
text-transform: none
|
90
|
-
|
91
|
-
|
92
|
-
|
92
|
+
|
93
|
+
// Print styles
|
94
|
+
//----------------------------------------------------------------------------------------------------
|
95
|
+
|
96
|
+
// Notes:
|
97
|
+
//
|
98
|
+
// Using "@media print" to avoid additional HTTP request to print.css
|
99
|
+
// Source: http://www.phpied.com/delay-loading-your-print-css/
|
100
|
+
// Credit: Paul Irish & HTML5 Boilerplate (http://html5boilerplate.com/)
|
101
|
+
|
93
102
|
.print-only
|
94
103
|
display: block !important
|
104
|
+
|
95
105
|
@media print
|
96
106
|
*
|
97
107
|
background: transparent !important
|