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.
@@ -1,117 +1,17 @@
1
- @import includes/settings
2
- @import includes/mixins
3
- @import includes/colors
4
- /* Table of Content */
5
- /* :: Buttons */
6
- /* :: Notices/Alerts */
7
- /* :: tabs */
8
- /* :: Pagination */
9
- /* :: Lists */
10
- /* :: Panels */
11
- /* :: Nav */
12
- /* :: Video */
13
- /* :: Microformats */
1
+ // Table of Contents:
2
+ //
3
+ // Notices and Alerts
4
+ // Tabs
5
+ // Pagination
6
+ // Lists
7
+ // Panels
8
+ // Nav
9
+ // Video
10
+ // Microformats
14
11
 
15
- /* Buttons */
16
- .button
17
- background: $blue
18
- display: inline-block
19
- text-align: center
20
- padding: 9px 34px 11px
21
- color: $white
22
- text-decoration: none
23
- font-weight: bold
24
- +HelveticaFontStack
25
- line-height: 1
26
- position: relative
27
- cursor: pointer
28
- border: none
29
- &.nice
30
- background-color: $blue
31
- +background-image(linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%))
32
- +box-shadow(0 1px 0 rgba(255,255,255,0.5) inset)
33
- text-shadow: 0 -1px 1px rgba(0,0,0,0.28)
34
- border: solid 1px darken($blue, 7%)
35
- +transition-property(background-color)
36
- +transition-duration(.15s)
37
- +transition-timing-function(ease-in-out)
38
- &.radius
39
- +border-radius(3px)
40
- &.round
41
- +border-radius(1000)
42
- &.full-width
43
- width: 100%
44
- padding-left: 0 !important
45
- padding-right: 0 !important
46
- text-align: center
47
- &.left-align
48
- text-align: left
49
- text-indent: 12px
50
-
51
- input[type=submit].button
52
- -webkit-appearance: none
53
-
54
- /* Sizes */
55
- .button
56
- &.small
57
- +font-size(11)
58
- padding: 8px 20px 10px
59
- width: auto
60
- &.medium
61
- +font-size(13)
62
- width: auto
63
- &.large
64
- +font-size(18)
65
- padding: 11px 48px 13px
66
- width: auto
67
- /* Colors */
68
- .button
69
- &.blue
70
- background-color: $blue
71
- &.red
72
- background-color: $red
73
- &.white
74
- background-color: #e9e9e9
75
- color: #333
76
- &.black
77
- background-color: $black
78
- /* Nice Colors */
79
- .nice
80
- &.button
81
- &.blue
82
- border: solid 1px darken($blue, 7%)
83
- &.red
84
- border: solid 1px darken($red, 7%)
85
- &.white
86
- border: solid 1px darken($white, 14%)
87
- text-shadow: none !important
88
- &.black
89
- border: solid 1px darken($black, 7%)
90
- /* Hovers */
91
- .button
92
- &:hover, &:focus
93
- background-color: darken($blue, 5%)
94
- color: #fff
95
- &.blue
96
- &:hover, &:focus
97
- background-color: darken($blue, 5%)
98
- &.red
99
- &:hover, &:focus
100
- background-color: darken($red, 5%)
101
- &.white
102
- &:hover, &:focus
103
- background-color: darken($white, 12%)
104
- color: #333
105
- &.black
106
- &:hover, &:focus
107
- background-color: darken($black, 5%)
12
+ // Alerts
13
+ //----------------------------------------------------------------------------------------------------
108
14
 
109
- /* Disabled */
110
- .button.disabled, .button[disabled]
111
- +opacity(0.6)
112
- cursor: default
113
-
114
- /* Alerts */
115
15
  div.alert-box
116
16
  display: block
117
17
  padding: 6px 7px
@@ -146,7 +46,9 @@ div.alert-box
146
46
  &:hover, &:focus
147
47
  +opacity(0.4)
148
48
 
149
- /* Tabs */
49
+ // Tabs
50
+ //----------------------------------------------------------------------------------------------------
51
+
150
52
  dl.tabs
151
53
  display: block
152
54
  margin: 0 0 20px
@@ -186,6 +88,8 @@ dl.tabs
186
88
  background: #fff
187
89
  border-width: 1px 1px 0 1px
188
90
  height: 30px
91
+
92
+ // Nice tabs
189
93
  .nice
190
94
  &.tabs
191
95
  border-bottom: solid 1px #eee
@@ -211,6 +115,8 @@ dl.tabs
211
115
  &:first-child
212
116
  a.active
213
117
  margin-left: 0
118
+
119
+ // Vertical tabs
214
120
  dl.tabs.vertical
215
121
  height: auto
216
122
  dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd
@@ -233,6 +139,8 @@ dl.tabs.vertical dd a
233
139
  margin: 0
234
140
  border-width: 1px 0 0
235
141
  background: $white
142
+
143
+ // Nice tabs vertical
236
144
  .nice.tabs.vertical
237
145
  border-bottom: solid 1px #eee
238
146
  height: auto
@@ -283,7 +191,9 @@ ul.nice.contained.tabs-content
283
191
  &>li
284
192
  border-color: #eee
285
193
 
286
- /* Pagination */
194
+ // Pagination
195
+ //----------------------------------------------------------------------------------------------------
196
+
287
197
  ul.pagination
288
198
  display: block
289
199
  height: 24px
@@ -311,7 +221,9 @@ ul.pagination
311
221
  a
312
222
  border-bottom: none
313
223
 
314
- /* Lists */
224
+ // Lists
225
+ //----------------------------------------------------------------------------------------------------
226
+
315
227
  ul.nice, ol.nice
316
228
  list-style: none
317
229
  margin: 0
@@ -324,7 +236,9 @@ ul.nice li span.bullet, ol.nice li span.number
324
236
  top: 0
325
237
  color: #ccc
326
238
 
327
- /* Panels */
239
+ // Panels
240
+ //----------------------------------------------------------------------------------------------------
241
+
328
242
  div.panel
329
243
  padding: 20px 20px 2px 20px
330
244
  background-color: #efefef
@@ -332,7 +246,9 @@ div.panel
332
246
  +box-shadow(0 2px 5px rgba(0,0,0,0.15))
333
247
  margin: 0 0 20px 0
334
248
 
335
- /* Nav Bar with Dropdowns */
249
+ // Nav Bar with Dropdowns
250
+ //----------------------------------------------------------------------------------------------------
251
+
336
252
  .nav-bar
337
253
  height: 45px
338
254
  background: #fff
@@ -404,9 +320,11 @@ div.panel
404
320
  p:last-child
405
321
  margin-bottom: 0
406
322
 
407
- /* Video */
408
- /* Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ */
409
- .video
323
+ // Video
324
+ //----------------------------------------------------------------------------------------------------
325
+ // Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
326
+
327
+ .flex-video
410
328
  position: relative
411
329
  padding-top: 25px
412
330
  padding-bottom: 67.5%
@@ -424,8 +342,10 @@ div.panel
424
342
  width: 100%
425
343
  height: 100%
426
344
 
427
- /* Microformats */
428
- /* hcard */
345
+ // Microformats
346
+ //----------------------------------------------------------------------------------------------------
347
+
348
+ // hcard
429
349
  ul.vcard
430
350
  display: inline-block
431
351
  margin: 0 0 12px 0
@@ -437,6 +357,8 @@ ul.vcard
437
357
  &.fn
438
358
  font-weight: bold
439
359
  +font-size(15)
360
+
361
+ // vevent
440
362
  p.vevent span.summary
441
363
  font-weight: bold
442
364
  p.vevent abbr
@@ -444,4 +366,4 @@ p.vevent abbr
444
366
  text-decoration: none
445
367
  font-weight: bold
446
368
  border: none
447
- padding: 0 1px
369
+ padding: 0 1px
@@ -5,4 +5,8 @@ $blue: #00a6fc
5
5
  $white: #fff
6
6
  $black: #000
7
7
  $red: #e91c21
8
- $black: #141414
8
+ $orange: #cc4714
9
+ $yellow: #ff0
10
+ $black: #141414
11
+
12
+ $default-color: $blue !default
@@ -1,16 +1,17 @@
1
- // Compass, importing CSS3 mixins and it's utilities
1
+ // Compass imports
2
2
  //----------------------------------------------------------------------------------------------------
3
3
 
4
4
  @import compass/css3
5
5
  @import compass/utilities
6
6
 
7
- // Font stacks
7
+ // Font stack
8
8
  //----------------------------------------------------------------------------------------------------
9
9
 
10
10
  @mixin HelveticaFontStack
11
- font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
11
+ font-family: $helvetica-font-stack
12
12
 
13
13
  // Font size mixin to include px and rem
14
+ //----------------------------------------------------------------------------------------------------
14
15
 
15
16
  @mixin font-size($size, $is-important: false)
16
17
  @if $is-important
@@ -20,13 +21,16 @@
20
21
  font-size: $size + px
21
22
  font-size: ($size / 10) + rem
22
23
 
23
- // WebKit: font-smoothing
24
- // Values: none, antialiased (default), subpixel-antialiased
25
- //
24
+ // WebKit font-smoothing
25
+ //----------------------------------------------------------------------------------------------------
26
+
26
27
  // References:
27
28
  //
28
29
  // 1. http://maxvoltar.com/sandbox/fontsmoothing/
29
30
  // 2. http://maxvoltar.com/archive/-webkit-font-smoothing
31
+ //
32
+ // Values: none, antialiased (default), subpixel-antialiased
33
+ //
30
34
 
31
35
  @mixin font-smoothing($value: antialiased)
32
36
  -webkit-font-smoothing: $value
@@ -1,5 +1,45 @@
1
- // Setttings to configure any needed vars that are global to Foundation
1
+ // `Global Foundation vars
2
2
  //----------------------------------------------------------------------------------------------------
3
3
 
4
- $experimental-support-for-khtml: false
5
- $experimental-support-for-microsoft: false
4
+ //
5
+ // This file contains global variables and settings for Foundation
6
+ // When adding new variables, be sure to use `!default` to allow over-riding at the project level
7
+ //
8
+
9
+ // Compass experimental support setttings
10
+ //----------------------------------------------------------------------------------------------------
11
+
12
+ $experimental-support-for-khtml: false !default
13
+ $experimental-support-for-microsoft: false !default
14
+
15
+ // Font stacks
16
+ //----------------------------------------------------------------------------------------------------
17
+
18
+ $helvetica-font-stack: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
19
+
20
+ // Default body tag variables
21
+ //----------------------------------------------------------------------------------------------------
22
+
23
+ $body-font-size: 13 !default
24
+ $body-font-family: $helvetica-font-stack !default
25
+ $body-background: #fff !default
26
+ $body-line-height: 18px !default
27
+ $body-color: #555 !default
28
+
29
+ // Grid settings
30
+ //----------------------------------------------------------------------------------------------------
31
+
32
+ $grid-max-width: 980px !default
33
+ $grid-min-width: 727px !default
34
+ $support-block-grid-nth-child: false !default
35
+
36
+ // Button settings
37
+ //----------------------------------------------------------------------------------------------------
38
+
39
+ $button-transition-duration: .25s !default
40
+
41
+ // Orbit settings
42
+ //----------------------------------------------------------------------------------------------------
43
+
44
+ $orbit-slider-id: featured !default
45
+ $include-default-orbit-slider-id: true !default
@@ -0,0 +1,13 @@
1
+ // Shared
2
+ @import ZURB/includes
3
+
4
+ // Foundation parts
5
+ @import ZURB/globals
6
+ @import ZURB/typography
7
+ @import ZURB/grid
8
+ @import ZURB/buttons
9
+ @import ZURB/ui
10
+ @import ZURB/forms
11
+ @import ZURB/orbit
12
+ @import ZURB/reveal
13
+ @import ZURB/mobile
@@ -14,16 +14,6 @@
14
14
  <title>Welcome to Foundation</title>
15
15
 
16
16
  <!-- Included CSS Files -->
17
- <!-- Combine and Compress These CSS Files -->
18
- <link rel="stylesheet" href="stylesheets/globals.css">
19
- <link rel="stylesheet" href="stylesheets/typography.css">
20
- <link rel="stylesheet" href="stylesheets/grid.css">
21
- <link rel="stylesheet" href="stylesheets/ui.css">
22
- <link rel="stylesheet" href="stylesheets/forms.css">
23
- <link rel="stylesheet" href="stylesheets/orbit.css">
24
- <link rel="stylesheet" href="stylesheets/reveal.css">
25
- <link rel="stylesheet" href="stylesheets/mobile.css">
26
- <!-- End Combine and Compress These CSS Files -->
27
17
  <link rel="stylesheet" href="stylesheets/app.css">
28
18
 
29
19
  <!--[if lt IE 9]>
@@ -45,7 +35,7 @@
45
35
  <div class="row">
46
36
  <div class="twelve columns">
47
37
  <h2>Welcome to Foundation</h2>
48
- <p>This is version 2.0.3 released on October 31, 2011</p>
38
+ <p>This is version 2.1.4 released on January 07, 2011</p>
49
39
 
50
40
  <hr />
51
41
  </div>
@@ -140,6 +130,7 @@
140
130
 
141
131
  <!-- Included JS Files -->
142
132
  <script src="javascripts/jquery.min.js"></script>
133
+ <script src="javascripts/modernizr.foundation.js"></script>
143
134
  <script src="javascripts/jquery.reveal.js"></script>
144
135
  <script src="javascripts/jquery.orbit-1.3.0.js"></script>
145
136
  <script src="javascripts/forms.jquery.js"></script>
@@ -29,10 +29,11 @@ $(document).ready(function () {
29
29
  if (window.location.hash) {
30
30
  activateTab($('a[href="' + window.location.hash + '"]'));
31
31
  }
32
-
32
+
33
33
  /* ALERT BOXES ------------ */
34
- $(".alert-box").delegate("a.close", "click", function() {
35
- $(this).closest(".alert-box").fadeOut(function(){
34
+ $(".alert-box").delegate("a.close", "click", function(event) {
35
+ event.preventDefault();
36
+ $(this).closest(".alert-box").fadeOut(function(event){
36
37
  $(this).remove();
37
38
  });
38
39
  });
@@ -50,43 +51,41 @@ $(document).ready(function () {
50
51
  // $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'left'});
51
52
  // $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'left'});
52
53
  // $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'left'});
53
-
54
-
55
-
54
+
55
+
56
+
56
57
  /* DROPDOWN NAV ------------- */
57
- /*
58
- $('.nav-bar li a, .nav-bar li a:after').each(function() {
58
+
59
+ var currentFoundationDropdown = null;
60
+ $('.nav-bar li a').each(function() {
59
61
  $(this).data('clicks', 0);
60
62
  });
61
- $('.nav-bar li a, .nav-bar li a:after').bind('touchend click', function(e){
62
- e.stopPropagation();
63
+ $('.nav-bar li a').on('click', function(e) {
63
64
  e.preventDefault();
64
- var f = $(this).siblings('.flyout');
65
+ if (currentFoundationDropdown !== $(this).index() || currentFoundationDropdown === null) {
66
+ $(this).data('clicks', 0);
67
+ currentFoundationDropdown = $(this).index();
68
+ }
65
69
  $(this).data('clicks', ($(this).data('clicks') + 1));
66
- if (!f.is(':visible') && f.length > 0) {
70
+ var f = $(this).siblings('.flyout');
71
+ if (!f.is(':visible') && $(this).parent('.has-flyout').length > 1) {
67
72
  $('.nav-bar li .flyout').hide();
68
73
  f.show();
69
- }
70
- });
71
- $('.nav-bar li a, .nav-bar li a:after').bind(' touchend click', function(e) {
72
- e.stopPropagation();
73
- e.preventDefault();
74
- if ($(this).data('clicks') > 1) {
74
+ } else if (($(this).data('clicks') > 1) || ($(this).parent('.has-flyout').length < 1)) {
75
75
  window.location = $(this).attr('href');
76
76
  }
77
77
  });
78
- $('.nav-bar').bind('touchend click', function(e) {
78
+ $('.nav-bar').on('click', function(e) {
79
79
  e.stopPropagation();
80
- if (!$(e.target).parents('.nav-bar li .flyout') || $(e.target) != $('.nav-bar li .flyout')) {
80
+ if ($(e.target).parents().is('.flyout') || $(e.target).is('.flyout')) {
81
81
  e.preventDefault();
82
82
  }
83
83
  });
84
- $('body').bind('touchend', function(e) {
85
- if (!$(e.target).parents('.nav-bar li .flyout') || $(e.target) != $('.nav-bar li .flyout')) {
86
- $('.nav-bar li .flyout').hide();
87
- }
88
- });
89
- */
84
+ // $('body').bind('touchend', function(e) {
85
+ // if (!$(e.target).parents().is('.nav-bar') || !$(e.target).is('.nav-bar')) {
86
+ // $('.nav-bar li .flyout').is(':visible').hide();
87
+ // }
88
+ // });
90
89
 
91
90
  /* DISABLED BUTTONS ------------- */
92
91
  /* Gives elements with a class of 'disabled' a return: false; */