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,9 +1,9 @@
1
- @import includes/settings
2
- @import includes/mixins
3
- @import includes/colors
4
- /* Mobile Grid Fixes */
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
- /* Tablet screens */
31
- @media only screen and (device-width: 768px), (device-width: 800)
32
- /* Currently unused */
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
- /* Mobile 4-column Grid */
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
- /* Block Grid */
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
- /* Mobile Visibility Affordances */
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
- /* Specific overrides for elements that require something other than display: block */
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
- /* Forms */
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
- /* Buttons */
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
- /* Tabs */
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
- /* Nav Bar with Dropdowns */
279
+ // Nav Bar with Dropdowns
248
280
  .nav-bar
249
281
  height: auto
250
- &>li
282
+ & > li
251
283
  float: none
252
284
  display: block
253
- &>a
285
+ & > a
254
286
  text-align: left
255
287
  border-top: 1px solid #ddd
256
288
  border-right: none
257
289
  &.has-flyout
258
- &>a
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
- &>a
300
+ & > a
269
301
  border-top: none
270
302
  &:hover
271
- &>a
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
- /* Video */
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
- @import includes/settings
2
- @import includes/mixins
3
- @import includes/colors
4
- /* CSS for jQuery Orbit Plugin 1.2.3 :: www.ZURB.com/playground :: Copyright 2010, ZURB :: Free to use under the MIT license. :: http://www.opensource.org/licenses/mit-license.php */
5
-
6
- /* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY */
7
- #featured
8
- width: 940px
9
- height: 450px
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
- &>img, &>div, &>a
15
+ & > img, & > div, & > a
13
16
  display: none
14
17
 
15
- /* Container */
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
- &>img
36
+ & > img
28
37
  position: absolute
29
38
  top: 0
30
39
  left: 0
31
- &>a
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
- /* Captions */
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
- /* Directional Nav */
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
- /* Bullet Nav */
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
- @import includes/settings
2
- @import includes/mixins
3
- @import includes/colors
4
- /* Reveal Modals */
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">&#215;</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
- /* Mobile */
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 &#215; */
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">&#215;</a> */
87
- /* </div> */
88
-
89
+ height: auto
@@ -1,7 +1,7 @@
1
- @import includes
1
+ // Typography
2
+ //----------------------------------------------------------------------------------------------------
2
3
 
3
- /* Typography */
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
- .subhead
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
- /* Blockquotes */
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
- /* Print styles. Inlined to avoid required HTTP connection: */ /* www.phpied.com/delay-loading-your-print-css/ */
92
- /* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
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