ZURB-foundation 2.1.3.3 → 2.1.4

data/stylesheets/ZURB/_mobile.sass

@@ -1,9 +1,9 @@
-@import includes/settings
-@import includes/mixins
-@import includes/colors
-/* Mobile Grid Fixes */
+// Mobile Grid Fixes
+//---------------------------------------------------
+
+// Typography
+//---------------------------------------------------
 
-/* Typography */
 @media only screen and (max-width: 767px)
   h1
     +font-size(32)
@@ -27,9 +27,11 @@
     +font-size(15)
     line-height: 1.4
 
-/* Tablet screens */
-@media only screen and (device-width: 768px), (device-width: 800)
-  /* Currently unused */
+// Tablet
+//---------------------------------------------------
+
+// Currently unused
+// @media only screen and (device-width: 768px), (device-width: 800)
 
 @media only screen and (max-width: 767px)
   body
@@ -62,7 +64,8 @@
   .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
     margin-left: 0% !important
 
-/* Mobile 4-column Grid */
+// Mobile 4-column Grid
+//----------------------------------------------------------------------------------------------------
 .row
   .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
     margin-left: 0
@@ -80,19 +83,19 @@
     width: 73.9% !important
   .phone-four.columns
     width: 100% !important
-  
-  
 
-/* Block Grid */
+// Block Grid
+//----------------------------------------------------------------------------------------------------
 @media only screen and (max-width: 767px)
   .block-grid.mobile
     margin-left: 0%
-    li
+    &>li
       float: none
       width: 100%
       margin-left: 0%
-  
-/* Mobile Visibility Affordances */
+
+// Mobile Visibility Affordances
+//----------------------------------------------------------------------------------------------------
 .show-on-phones
   display: none !important
 .show-on-tablets
@@ -121,7 +124,25 @@
     display: block !important
   .show-on-desktops
     display: none !important
-    
+
+// Modernizr-enabled tablet targeting
+//-------------------------------------------------
+
+@media only screen and (max-width: 1280px) and (min-width: 768px)
+  .touch
+    .hide-on-phones
+      display: block !important
+    .hide-on-tablets
+      display: none !important
+    .hide-on-desktops
+      display: block !important
+    .show-on-phones
+      display: none !important
+    .show-on-tablets
+      display: block !important
+    .show-on-desktops
+      display: none !important
+  
 @media only screen and (max-width: 767px)
   .hide-on-phones
     display: none !important
@@ -137,7 +158,12 @@
   .show-on-desktops
     display: none !important 
 
-/* Specific overrides for elements that require something other than display: block */
+// Specific overrides
+//----------------------------------------------------------------------------------------------------
+
+//
+// For elements that require something other than display: block
+//
 
 table
   &.show-on-desktops
@@ -165,7 +191,9 @@ table
     &.show-on-phones
       display: block !important
 
-/* Forms */
+// Forms
+//----------------------------------------------------------------------------------------------------
+
 @media only screen and (max-width: 767px)
   input.input-text, input.input-text.oversize, textarea, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
     display: block
@@ -180,7 +208,9 @@ table
   form.nice .small+.error, form.nice .medium+.error, form.nice .large+.error
     width: auto
 
-/* Buttons */
+// Buttons
+//----------------------------------------------------------------------------------------------------
+
 @media only screen and (max-width: 767px)
   .button
     display: block
@@ -189,7 +219,9 @@ table
     padding-left: 0
     padding-right: 0
     
-/* Tabs */
+// Tabs
+//----------------------------------------------------------------------------------------------------
+
 @media only screen and (max-width: 767px)
   dl.tabs.mobile, dl.nice.tabs.mobile
     width: auto
@@ -244,18 +276,18 @@ table
   dl.nice.contained.tabs.mobile dd a
     padding: 18px 20px
 
-  /* Nav Bar with Dropdowns */
+  // Nav Bar with Dropdowns
   .nav-bar
     height: auto
-    &>li
+    & > li
       float: none
       display: block
-      &>a
+      & > a
         text-align: left
         border-top: 1px solid #ddd
         border-right: none
       &.has-flyout
-        &>a
+        & > a
           &:after
             content: ""
             width: 0
@@ -265,10 +297,10 @@ table
             border-top: 4px solid #2a85e8
             display: block
       &:first-child
-        &>a
+        & > a
           border-top: none
       &:hover
-        &>a
+        & > a
           font-weight: bold
         ul
           position: relative
@@ -286,7 +318,9 @@ table
     p.last-child
       margin-bottom: 18px
   
-/* Video */
+// Video
+//----------------------------------------------------------------------------------------------------
+
 @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)
   .video
     padding-top: 0

data/stylesheets/ZURB/_orbit.sass

@@ -1,18 +1,27 @@
-@import includes/settings
-@import includes/mixins
-@import includes/colors
-/* 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 */
-
-/*  PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY */                    
-#featured
-  width: 940px
-  height: 450px
+// CSS for jQuery Orbit Plugin 1.2.3 - http://www.zurb.com/playground
+// Copyright 2010, ZURB - Free to use under the MIT license - http://www.opensource.org/licenses/mit-license.php
+//
+// Configure the slider ID by setting $orbit-slider-id
+
+// Orbit Slider
+//----------------------------------------------------------------------------------------------------
+
+// Orbit slider mixin
+@mixin orbit-slider($width: 940px, $height: 450px)
+  width: $width
+  height: $height
   background: #000 image-url('orbit/loading.gif') no-repeat center center
   overflow: hidden
-  &>img, &>div, &>a
+  & > img, & > div, & > a
     display: none
 
-/* Container */
+@if $include-default-orbit-slider-id
+  ##{$orbit-slider-id}
+    @include orbit-slider()
+
+// Orbit container
+//----------------------------------------------------------------------------------------------------
+
 div.orbit-wrapper
   width: 1px
   height: 1px
@@ -24,20 +33,30 @@ div.orbit
   overflow: hidden
   &.with-bullets
     margin-bottom: 40px
-  &>img
+  & > img
     position: absolute
     top: 0
     left: 0
-  &>a
+  & > a
     border: none
     position: absolute
     top: 0
     left: 0
     line-height: 0
     display: none
+  &>div
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+
+// Orbit timer
+//----------------------------------------------------------------------------------------------------
+//
+// 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
 
-/* 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 */
-/* Timer */
 div.timer
   width: 40px
   height: 40px
@@ -86,8 +105,10 @@ span.pause
     background: image-url('orbit/pause-black.png') no-repeat 0 -40
 div.timer:hover span.pause, span.pause.active
   +opacity(1)
-  
-/* Captions */
+
+// Orbit captions
+//----------------------------------------------------------------------------------------------------
+
 .orbit-caption
   display: none
   +HelveticaFontStack
@@ -103,8 +124,10 @@ div.timer:hover span.pause, span.pause.active
   right: 0
   bottom: 0
   width: 100%
-  
-/* Directional Nav */
+
+// Directional Nav
+//----------------------------------------------------------------------------------------------------
+
 div.slider-nav
   display: block
   span
@@ -123,7 +146,9 @@ div.slider-nav
       background: image-url('orbit/left-arrow.png')
       left: 0
 
-/* Bullet Nav */
+// Bullet Nav
+//----------------------------------------------------------------------------------------------------
+
 .orbit-bullets
   position: absolute
   z-index: 1000
@@ -152,5 +177,45 @@ div.slider-nav
     &.active
       &.has-thumb
         background-position: 0 0
-        border-top: solid 2px $black  
-    
+        border-top: solid 2px $black
+
+// Fluid Layout
+//-------------------------------------------------------------------------------------
+
+.orbit .fluid-placeholder
+  visibility: hidden
+  position: static
+  display: block
+  width: 100%
+.orbit, .orbit-wrapper
+  width: 100% !important
+
+.orbit-bullets
+  position: absolute
+  z-index: 1000
+  list-style: none
+  bottom: -50px
+  left: 50%
+  margin-left: -50px
+  padding: 0
+  li
+    float: left
+    margin-left: 5px
+    cursor: pointer
+    color: #999
+    text-indent: -9999px
+    background: image-url('orbit/bullets.jpg') no-repeat 4px 0
+    width: 13px
+    height: 12px
+    overflow: hidden
+    &.has-thumb
+      background: none
+      width: 100px
+      height: 75px
+    &.active
+      color: #222
+      background-position: -8px 0
+      &.has-thumb
+        background-position: 0 0
+        border-top: 2px solid #000
+  

data/stylesheets/ZURB/_reveal.sass

@@ -1,7 +1,19 @@
-@import includes/settings
-@import includes/mixins
-@import includes/colors
-/* Reveal Modals */
+// CSS for jQuery Reveal Plugin - http://www.zurb.com/playground
+//
+// The modal's close button entity is ×
+//
+// Example markup:
+//
+// <div id="myModal" class="reveal-modal">
+//   <h2>Awesome. I have it.</h2>
+//   <p class="lead">Your couch. I it's mine.</p>
+//   <p>Lorem ipsum dolor sit amet ...</p>
+//   <a class="close-reveal-modal">&#215;</a>
+// </div>
+
+// Reveal Modals
+//----------------------------------------------------------------------------------------------------
+
 .reveal-modal-bg
   position: fixed
   height: 100%
@@ -50,7 +62,9 @@
   .row
     min-width: 0
 
-/* Mobile */
+// Reveal mobile
+//----------------------------------------------------------------------------------------------------
+
 @media only screen and (device-width: 768px), (device-width: 800)
   .reveal-modal-bg
     position: absolute
@@ -72,17 +86,4 @@
       left: 5%
       margin-left: 0
       padding: 5%
-      height: auto
-
-
-/* NOTES */
-/* Close button entity is &#215; */
-	
-/* Example markup */
-/* <div id="myModal" class="reveal-modal"> */
-/* 	<h2>Awesome. I have it.</h2> */
-/* 	<p class="lead">Your couch.  I it's mine.</p> */
-/* 	<p>Lorem ipsum dolor sit amet...</p> */
-/* 	<a class="close-reveal-modal">&#215;</a> */
-/* </div> */
-
+      height: auto

data/stylesheets/ZURB/_typography.sass

@@ -1,7 +1,7 @@
-@import includes
+// Typography
+//----------------------------------------------------------------------------------------------------
 
-/* Typography */
-h1,h2,h3,h4,h5,h6
+#{headings(all)}
   color: #181818
   font-weight: bold
   line-height: 1.25
@@ -9,6 +9,7 @@ h1,h2,h3,h4,h5,h6
     color: #777
   a
     font-weight: inherit
+
 h1
   +font-size(46)
   margin-bottom: 12px
@@ -29,7 +30,7 @@ h6
   +font-size(15)
   font-weight: normal
 
-.subhead
+.subheader
   color: #777
   font-weight: 300
   margin-bottom: 24px
@@ -53,7 +54,8 @@ small
   font-size: 60%
   line-height: inherit
 
-/* Blockquotes */
+// Blockquotes
+//--------------------------------------------
 blockquote
   line-height: 20px
   color: #777
@@ -87,11 +89,19 @@ abbr, acronym
   cursor: help
 abbr
   text-transform: none
-  
-/* Print styles. Inlined to avoid required HTTP connection: */ /* www.phpied.com/delay-loading-your-print-css/ */
-/* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
+
+// Print styles
+//----------------------------------------------------------------------------------------------------  
+
+// Notes:
+//
+//    Using "@media print" to avoid additional HTTP request to print.css
+//    Source: http://www.phpied.com/delay-loading-your-print-css/
+//    Credit: Paul Irish & HTML5 Boilerplate (http://html5boilerplate.com/)
+
 .print-only
   display: block !important
+
 @media print
   *
     background: transparent !important