ZURB-foundation 2.1.5.2 → 2.2

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.
@@ -1,61 +1,43 @@
1
1
  // Table of Contents:
2
2
  //
3
- // Eric Meyer's CSS reset
4
- // Body
3
+ // Reset & Standards
5
4
  // Links
6
5
  // Lists
7
6
  // Tables
8
7
  // Misc
9
8
  //
10
9
 
11
- // Eric Meyer's CSS Reset :: http://meyerweb.com/eric/tools/css/reset/
12
- //-------------------------------------------------------------------------------
10
+ // Global Reset & Standards
11
+ //-----------------------------------------
13
12
 
13
+ // Eric Meyer's CSS Reset
14
+ // http://meyerweb.com/eric/tools/css/reset/
15
+ // v2.0 | 20110126
16
+ // License: none (public domain)
14
17
 
15
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
16
- margin: 0
18
+ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
19
+ margin: 0
17
20
  padding: 0
18
21
  border: 0
19
22
  font: inherit
20
23
  vertical-align: baseline
21
24
  html
22
25
  font-size: 62.5%
23
-
24
- // HTML 5 reset for older browsers
25
- //-----------------------------------------
26
-
26
+ // HTML5 display-role reset for older browsers
27
27
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
28
28
  display: block
29
29
  body
30
30
  line-height: 1
31
- ol, ul
31
+ ol,ul
32
32
  list-style: none
33
33
  blockquote, q
34
34
  quotes: none
35
- &:before, &:after
36
- content: ""
37
- content: none
35
+ blockquote:before, blockquote:after, q:before, q:after
36
+ content: ""
37
+ content: none
38
38
  table
39
39
  border-collapse: collapse
40
40
  border-spacing: 0
41
-
42
- // Nicolas Gallagher's micro clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
43
- //----------------------------------------------------------------------------------------------------
44
-
45
- // For modern browsers
46
- .clearfix
47
- &:before, &:after
48
- content: ""
49
- display: table
50
- &:after
51
- clear: both
52
-
53
- // For IE 6/7 (triggers hasLayout)
54
- .clearfix
55
- zoom: 1
56
-
57
- // Base Cascade
58
- //----------------------------------------------
59
41
 
60
42
  body
61
43
  background: $body-background
@@ -70,15 +52,14 @@ body
70
52
  //-----------------------------------------
71
53
 
72
54
  a
73
- color: $blue
55
+ color: $default-color
74
56
  text-decoration: none
75
57
  line-height: inherit
76
58
  &:hover
77
- color: lighten($blue, 10%)
59
+ color: lighten($default-color, 10%)
78
60
  &:focus
79
61
  color: $orange
80
62
  outline: none
81
-
82
63
  p
83
64
  a, a:visited
84
65
  line-height: inherit
@@ -141,6 +122,10 @@ table
141
122
  +font-size(12)
142
123
  line-height: 18px
143
124
  text-align: left
125
+ color: #333
126
+ padding: 9px 10px
127
+ vertical-align: top
128
+ border: none
144
129
  tfoot
145
130
  tr
146
131
  td
@@ -169,3 +154,6 @@ table
169
154
  display: none
170
155
  .highlight
171
156
  background: $yellow
157
+
158
+ #googlemap img, object, embed, #map_canvas embed, #map_canvas img, #map_canvas object
159
+ max-width: none
@@ -1,8 +1,12 @@
1
+ // Grid
2
+ //--------------------------------------
3
+ // This is the mobile-friendly, responsive grid that
4
+ // lets Foundation work much of its magic
5
+
1
6
  .container
2
7
  padding: 0 20px
3
8
 
4
9
  .row
5
- @extend .clearfix
6
10
  width: 100%
7
11
  max-width: $grid-max-width
8
12
  min-width: $grid-min-width
@@ -17,6 +21,8 @@
17
21
  position: relative
18
22
  &:first-child
19
23
  margin-left: 0
24
+ [class*="column"]+[class*='column']:last-child
25
+ float: right
20
26
 
21
27
  .row
22
28
  .one.columns
@@ -24,7 +30,7 @@
24
30
  .two.columns
25
31
  width: 13%
26
32
  .three.columns
27
- width: 21.68%
33
+ width: 21.679%
28
34
  .four.columns
29
35
  width: 30.37%
30
36
  .five.columns
@@ -90,6 +96,7 @@
90
96
  .centered
91
97
  float: none
92
98
  margin: 0 auto
99
+
93
100
  // Source Ordering
94
101
  .push-two
95
102
  left: 17.4%
@@ -129,7 +136,6 @@
129
136
  .pull-ten
130
137
  right: 87%
131
138
 
132
-
133
139
  img, object, embed
134
140
  max-width: 100%
135
141
  height: auto
@@ -137,6 +143,15 @@ img
137
143
  -ms-interpolation-mode: bicubic
138
144
  #map_canvas img, .map_canvas img
139
145
  max-width: none !important
146
+
147
+ // Nicolas Gallagher's micro clearfix
148
+ .row:before, .row:after, .clearfix:before, .clearfix:after
149
+ content: ""
150
+ display: table
151
+ .row:after, .clearfix:after
152
+ clear: both
153
+ .row, .clearfix
154
+ zoom: 1
140
155
 
141
156
  // Blockgrids
142
157
  //----------------------------------------------------------------------------------------------------
@@ -27,6 +27,8 @@
27
27
  +font-size(15)
28
28
  line-height: 1.4
29
29
 
30
+ // Grid
31
+ //---------------------------------------------------
30
32
  @media only screen and (max-width: 767px)
31
33
  body
32
34
  -webkit-text-size-adjust: none
@@ -55,6 +57,14 @@
55
57
  margin-right: 0
56
58
  .column:last-child, .columns:last-child
57
59
  margin-right: 0
60
+ float: none
61
+ [class*="column"]+[class*="column"]:last-child
62
+ float: none
63
+ [class*="column"]:before, [class*="column"]:after
64
+ content: ""
65
+ display: table
66
+ [class*="column"]
67
+ clear: both
58
68
  .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
59
69
  margin-left: 0% !important
60
70
  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten
@@ -62,7 +72,7 @@
62
72
  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten
63
73
  right: none
64
74
  // Mobile 4-column Grid
65
- //----------------------------------------------------------------------------------------------------
75
+ //----------------------------------------------
66
76
  .row
67
77
  .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
78
  margin-left: 0
@@ -94,8 +104,9 @@
94
104
  right: 52.2%
95
105
  .columns.pull-three-phone
96
106
  right: 78.3%
107
+
97
108
  // Block Grid
98
- //----------------------------------------------------------------------------------------------------
109
+ //--------------------------------------------------
99
110
  @media only screen and (max-width: 767px)
100
111
  .block-grid.mobile
101
112
  margin-left: 0%
@@ -105,7 +116,7 @@
105
116
  margin-left: 0%
106
117
 
107
118
  // Mobile Visibility Affordances
108
- //----------------------------------------------------------------------------------------------------
119
+ //---------------------------------------------------
109
120
  .show-on-phones
110
121
  display: none !important
111
122
  .show-on-tablets
@@ -120,21 +131,6 @@
120
131
  .hide-on-desktops
121
132
  display: none !important
122
133
 
123
- @media only screen and (max-device-width: 800), only screen and (device-width: 1024px) and (device-width: 600), only screen and (width: 1280) and (orientation: landscape), only screen and (device-width: 800)
124
- .hide-on-phones
125
- display: block !important
126
- .hide-on-tablets
127
- display: none !important
128
- .hide-on-desktops
129
- display: block !important
130
-
131
- .show-on-phones
132
- display: none !important
133
- .show-on-tablets
134
- display: block !important
135
- .show-on-desktops
136
- display: none !important
137
-
138
134
  // Modernizr-enabled tablet targeting
139
135
  //-------------------------------------------------
140
136
 
@@ -168,12 +164,7 @@
168
164
  .show-on-desktops
169
165
  display: none !important
170
166
 
171
- // Specific overrides
172
- //----------------------------------------------------------------------------------------------------
173
-
174
- //
175
- // For elements that require something other than display: block
176
- //
167
+ // Specific overrides for elements that require something other than display: block
177
168
 
178
169
  table
179
170
  &.show-on-desktops
@@ -183,54 +174,65 @@ table
183
174
  &.hide-on-tablets
184
175
  display: table !important
185
176
 
186
- @media only screen and (max-device-width: 800), only screen and (device-width: 1024px) and (device-height: 600), only screen and (width: 1280) and (orientation: landscape), only screen and (device-width: 800)
187
- table
188
- &.hide-on-phones
189
- display: block !important
190
- &.hide-on-desktops
191
- display: block !important
192
- &.show-on-tablets
193
- display: block !important
177
+ @media only screen and (max-width: 1280px) and (min-width: 768px)
178
+ .touch
179
+ table.hide-on-phones
180
+ display: table !important
181
+ table.hide-on-desktops
182
+ display: table !important
183
+ table.hide-on-tablets
184
+ display: table !important
194
185
 
195
186
  @media only screen and (max-width: 767px)
196
187
  table
197
188
  &.hide-on-tablets
198
- display: block !important
189
+ display: table !important
199
190
  &.hide-on-desktops
200
- display: block !important
191
+ display: table !important
201
192
  &.show-on-phones
202
- display: block !important
193
+ display: table !important
203
194
 
204
195
  // Forms
205
- //----------------------------------------------------------------------------------------------------
196
+ //----------------------------------------------
206
197
 
207
198
  @media only screen and (max-width: 767px)
208
- input.input-text, input.input-text.oversize, textarea, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
199
+ div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea, form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
209
200
  display: block
210
- width: 96%
201
+ width: 100%
211
202
  padding: 6px 2% 4px
212
203
  +font-size(18)
213
- form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
204
+ form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
214
205
  +border-radius(2px)
215
- form.nice small.error
206
+ form.nice div.form-field.error small, form.nice small.error
216
207
  padding: 6px 2%
217
208
  display: block
218
- form.nice .small+.error, form.nice .medium+.error, form.nice .large+.error
209
+ form.nice div.form-field.error .small + small, form.nice .small + .error
210
+ width: auto
211
+ form.nice div.form-field.error .medium + small, form.nice .medium + .error
212
+ width: auto
213
+ form.nice div.form-field.error .large + small, form.nice .large + .error
214
+ width: auto
215
+ form.nice div.form-field.error .expand + small, form.nice .expand + .error
219
216
  width: auto
220
217
 
218
+ //----------------------------------------------
219
+ // UI
220
+ //----------------------------------------------
221
+
221
222
  // Buttons
222
- //----------------------------------------------------------------------------------------------------
223
+ //----------------------------------------------
223
224
 
224
225
  @media only screen and (max-width: 767px)
225
226
  .button
226
227
  display: block
227
- button.button
228
+ button.button, input[submit="submit"].button
228
229
  width: 100%
229
230
  padding-left: 0
230
231
  padding-right: 0
232
+ margin-bottom: 5px
231
233
 
232
234
  // Tabs
233
- //----------------------------------------------------------------------------------------------------
235
+ //-----------------------------------------------
234
236
 
235
237
  @media only screen and (max-width: 767px)
236
238
  dl.tabs.mobile, dl.nice.tabs.mobile
@@ -285,6 +287,10 @@ table
285
287
  padding: 18px 20px
286
288
  dl.nice.contained.tabs.mobile dd a
287
289
  padding: 18px 20px
290
+ dl.tabs.mobile + ul.contained
291
+ margin-left: -20px
292
+ margin-right: -20px
293
+ border-width: 0 0 1px 0
288
294
 
289
295
  // Nav Bar with Dropdowns
290
296
  .nav-bar
@@ -341,11 +347,23 @@ table
341
347
  width: auto
342
348
  p.last-child
343
349
  margin-bottom: 18px
344
- .nav-bar>li:hover .flyout
345
- display: none
346
-
350
+
351
+ // Tooltips
352
+ //-----------------------------------------------
353
+
354
+ @media only screen and (max-width: 767px)
355
+ .tooltip
356
+ +font-size(14)
357
+ line-height: 1.4
358
+ padding: 7px 10px 9px 10px
359
+ .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub
360
+ border-color: transparent transparent rgb(0,0,0) transparent
361
+ border-color: transparent transparent rgba(0,0,0,0.85) transparent
362
+ top: -12px
363
+ left: 10px
364
+
347
365
  // Video
348
- //----------------------------------------------------------------------------------------------------
366
+ //-----------------------------------------------
349
367
 
350
368
  @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)
351
369
  .flex-video
@@ -1,26 +1,10 @@
1
- // CSS for jQuery Orbit Plugin 1.4.0 - 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
13
- background: #000 image-url('orbit/loading.gif') no-repeat center center
14
- overflow: hidden
15
- & > img, & > div, & > a
16
- display: none
17
-
18
- @if $include-default-orbit-slider-id
19
- ##{$orbit-slider-id}
20
- @include orbit-slider()
1
+ // CSS for jQuery Orbit Plugin 1.4.0
2
+ // Maintained for Foundation. foundation.zurb.com
3
+ // Free to use under the MIT license.
4
+ // http://www.opensource.org/licenses/mit-license.php
21
5
 
22
6
  // Orbit container
23
- //----------------------------------------------------------------------------------------------------
7
+ //-------------------------------------------------
24
8
 
25
9
  div.orbit-wrapper
26
10
  width: 1px
@@ -46,11 +30,10 @@ div.orbit
46
30
  width: 100%
47
31
  height: 100%
48
32
 
49
- // Orbit timer
50
- //----------------------------------------------------------------------------------------------------
51
- //
52
- // If your slider only uses content or anchors, you're going to want to put the width and height
53
- // declarations on the .orbit > div and div.orbit > a tags in addition to just the .orbit-wrapper
33
+ // 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
34
+
35
+ // Timer
36
+ //--------------------------------------------------
54
37
  div.orbit-wrapper
55
38
  div.timer
56
39
  width: 40px
@@ -97,12 +80,12 @@ div.orbit-wrapper
97
80
  z-index: 4
98
81
  +opacity(0)
99
82
  &.active
100
- background: image-url('orbit/pause-black.png') no-repeat 0 -40
83
+ background: image-url('orbit/pause-black.png') no-repeat 0 -40px
101
84
  div.timer:hover span.pause, span.pause.active
102
85
  +opacity(1)
103
86
 
104
87
  // Orbit captions
105
- //----------------------------------------------------------------------------------------------------
88
+ //-------------------------------------------------
106
89
 
107
90
  .orbit-caption
108
91
  display: none
@@ -121,7 +104,7 @@ div.orbit-wrapper
121
104
  width: 100%
122
105
 
123
106
  // Directional Nav
124
- //----------------------------------------------------------------------------------------------------
107
+ //----------------------------------------------------
125
108
 
126
109
  div.orbit-wrapper
127
110
  div.slider-nav
@@ -143,7 +126,7 @@ div.orbit-wrapper
143
126
  left: 0
144
127
 
145
128
  // Bullet Nav
146
- //----------------------------------------------------------------------------------------------------
129
+ //--------------------------------------------------
147
130
 
148
131
  ul.orbit-bullets
149
132
  position: absolute
@@ -178,15 +161,15 @@ ul.orbit-bullets
178
161
  // Fluid Layout
179
162
  //-------------------------------------------------------------------------------------
180
163
 
181
- .orbit .fluid-placeholder
164
+ div.orbit img.fluid-placeholder
182
165
  visibility: hidden
183
166
  position: static
184
167
  display: block
185
168
  width: 100%
186
- .orbit, .orbit-wrapper
169
+ div.orbit, div.orbit-wrapper
187
170
  width: 100% !important
188
171
 
189
- .orbit-bullets
172
+ ul.orbit-bullets
190
173
  position: absolute
191
174
  z-index: 30
192
175
  list-style: none