ZURB-foundation 2.1.5.2 → 2.2

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