zurb-foundation 3.0.9 → 3.1.0.rc1

data/scss/foundation/components/modules/_ui.scss

@@ -16,14 +16,16 @@
 :: Lists
 :: Link Lists
 :: Keystroke Chars
+:: Image Thumbnails
 :: Video
 :: Tables
 :: Microformats
+:: Progress Bars
 
 */
 
   /* Visibility Classes ---------------------- */
-  
+
   /* Standard (large) display targeting */
   .show-for-small,
   .show-for-medium,
@@ -145,7 +147,7 @@
     &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
     &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); text-shadow: 0 1px rgba(#fff,.3); }
 
-    a.close { color: #333; position: absolute; right: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; }
+    a.close { color: #333; position: absolute; #{$defaultOpposite}: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; }
     a.close:hover, a.close:focus { opacity: 0.4; }
 
   }
@@ -175,7 +177,7 @@
 
   .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; @include font-size($tooltipFontSize); padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal;
 
-    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; left: 10px; }
+    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; #{$defaultFloat}: 10px; }
     &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; }
     &.tip-top>.nub { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }
 
@@ -223,33 +225,32 @@
     &.radius { @include border-radius($buttonRadius); }
 
   }
-  
+
   /* Accordion ---------------------- */
-  
+
   ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;
-    
+
     &>li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
-      
-      .title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-left: 1px solid $secondaryColor; border-right: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
-        
+      .title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-left: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
+
         h1, h2, h3, h4, h5 { margin: 0; }
-        &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), right); position: absolute; right: 15px; top: 21px; }
+        &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; }
       }
-      
+
       .content { display: none; padding: 15px; }
-      
+
       &.active { border-top: 3px solid $mainColor;
-      
+
         .title { background: $white; padding-top: 13px;
-          
+
           &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); }
         }
-        .content { background: $white; display: block; border-left: 1px solid $secondaryColor; border-right: 1px solid $secondaryColor; }
+        .content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; }
       }
     }
   }
-  
-  
+
+
 
   /* Side Nav ---------------------- */
 
@@ -265,9 +266,9 @@
 
   /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
 
-  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px -9px; padding-top: 4px;
+  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px;
 
-    dt, dd { float: left; display: inline; margin-left: 9px; margin-bottom: 10px; }
+    dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; }
     dt { color: #999; font-weight: $bodyFontWeight; }
     dd a { text-decoration: none; @include border-radius(1000px); }
     dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
@@ -276,9 +277,9 @@
 
   /* Pagination ---------------------- */
 
-  ul.pagination { display: block; height: 24px; margin-left: -5px;
+  ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px;
 
-    li { float: left; display: block; height: 24px; color: #999; font-size: ms(0); margin-left: 5px;
+    li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
 
       a { display: block; padding: 1px 7px 1px; color: #555; }
       &:hover a, a:focus { background: darken($white, 10%); }
@@ -295,10 +296,10 @@
 
   ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden;
 
-    li { margin: 0; padding: 0 12px 0 0; float: left; list-style: none;
+    li { margin: 0; padding: 0 12px 0 0; float: $defaultFloat; list-style: none;
 
-      a, span { text-transform: uppercase; @include font-size(11); padding-left: 12px; }
-      &:first-child a, &:first-child span { padding-left: 0; }
+      a, span { text-transform: uppercase; @include font-size(11); padding-#{$defaultFloat}: 12px; }
+      &:first-child a, &:first-child span { padding-#{$defaultFloat}: 0; }
     }
 
     li:before { content: "/"; color: #aaa; }
@@ -316,7 +317,7 @@
   /* Link List */
   ul.link-list { margin: 0 0 ms(1) -22px; padding: 0; list-style: none; overflow: hidden;
 
-    li { list-style: none; float: left; margin-left: 22px; display: block;
+    li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block;
 
       a { display: block; }
     }
@@ -326,6 +327,13 @@
 
   .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }
 
+  /* Image Thumbnails ---------------------- */
+  .th { display: block;
+    img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(border, box-shadow); @include transition-duration(300ms); }
+    &:hover {
+      img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); }
+    }
+  }
 
   /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */
 
@@ -340,7 +348,7 @@
     &.widescreen { padding-bottom: 57.25%; }
     &.vimeo { padding-top: 0; }
 
-    iframe, object, embed, video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+    iframe, object, embed, video { position: absolute; top: 0; #{$defaultFloat}: 0; width: 100%; height: 100%; }
 
   }
 
@@ -357,11 +365,11 @@
   table tfoot tr th,
   table tbody tr td,
   table tr td,
-  table tfoot tr td { font-size: ms(0); line-height: 18px; text-align: left; }
+  table tfoot tr td { font-size: ms(0); line-height: 18px; text-align: #{$defaultFloat}; }
   table thead tr th,
   table tfoot tr td { padding: 8px 10px 9px; font-size: ms(0) + 2; font-weight: bold; color: #222; }
-  table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
-  table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }
+  table thead tr th:first-child, table tfoot tr td:first-child { border-#{$defaultFloat}: none; }
+  table thead tr th:last-child, table tfoot tr td:last-child { border-#{$defaultOpposite}: none; }
 
   table tbody tr.even,
   table tbody tr.alt { background: #f9f9f9; }
@@ -382,3 +390,23 @@
     abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
   }
 
+  /* Progress Bar ---------------------- */
+
+  div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
+
+  	/* meter */
+  	.meter { background: $mainColor; height: 100%; display: block; width:50%; }
+   	&.secondary .meter { background: $secondaryColor;}
+  	&.success .meter { background: $successColor;}
+  	&.alert .meter { background: $alertColor;}
+
+  	/* border radii */
+  	&.radius { @include border-radius($buttonRadius);
+      .meter { @include border-radius(2px); }
+    }
+  	&.round { @include border-radius(1000px);
+      .meter { @include border-radius(1000px); }
+    }
+
+  }
+

data/scss/foundation/mixins/_css-triangle.scss

@@ -18,5 +18,5 @@
     @if ($triangleDirection == right) {
       border-color: transparent $triangleColor transparent transparent;
     }
-    // .example { @include css-triangle(5px, #fff, bottom); }
+    // .example { @include cssTriangle(5px, #fff, bottom); }
   }

data/templates/project/scss/_settings.scss

@@ -9,6 +9,10 @@
 // $totalColumns: 12;
 // $mobileTotalColumns: 4;
 
+// Text Direction Settings
+
+// $textDirection: ltr; // Controls default global text direction, 'rtl' or 'ltr'
+
 // Colors Settings
 
 // $mainColor: #2ba6cb;
@@ -29,7 +33,7 @@
 // $headerFontColor: #222;
 // $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 // $bodyFontWeight: normal;
-// $bodyFontColor: #222;
+// $bodyFontColor: $txtColor;
 
 // Button Settings
 
@@ -53,12 +57,23 @@
 // $navBarHeight: 40px;
 // $navFlyoutBaseWidth: 250px;
 
+// UI Settings
+
+// $thumbRadius: 3px;
+
+// $progBarHeight: 25px;
+// $progBarBorderColor: darken($white, 20%);
+// $progBarBorderSize: 1px;
+// $progBarPad: 2px;
+
 // Modular Scale
+
 // $ratio: $golden;
 // $baseFontSize: 14px;
 // $importantModNum: 44px;
 
 // Tooltip Settings
+
 // $hasTipBorderBottom: dotted 1px #ccc;
 // $hasTipFontWeight: bold;
 // $hasTipFontColor: #333;
@@ -73,4 +88,19 @@
 // $tapToCloseFontWeight: normal;
 // $tapToCloseFontColor: #888;
 // $tooltipFontSizeScreenSmall: 14;
-// $tooltipBackgroundOpacityScreenSmall: 0.85;
+// $tooltipBackgroundOpacityScreenSmall: 0.85;
+
+// Top Bar Settings
+
+// $topBarBgColor: #222;
+// $topBarHeight: 45px;
+// $topBarBtmMargin: 30px;
+// $topBarTitleWeight: bold;
+// $topBarTitleSize: ms(1);
+// $topBarLinkColor: $white;
+// $topBarLinkWeight: bold;
+// $topBarLinkSize: ms(0) - 1;
+// $topBarDropToggleSize: 5px;
+// $topBarSearchWidth: 200px;
+// $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout
+// $topBarNavToggleSize: 8px;

data/templates/project/scss/app.scss

@@ -39,6 +39,7 @@
 // @import "foundation/components/modules/buttons";
 // @import "foundation/components/modules/tabs";
 // @import "foundation/components/modules/ui";
+// @import "foundation/components/modules/topbar";
 // @import "foundation/components/modules/navbar";
 // @import "foundation/components/modules/orbit";
 // @import "foundation/components/modules/reveal";

data/test/buttons.html

@@ -14,7 +14,7 @@
 
   <!-- Included CSS Files -->
   <link rel="stylesheet" href="stylesheets/styles.css">
-  
+
   <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
 
   <!-- IE Fix for HTML5 Tags -->
@@ -23,7 +23,7 @@
   <![endif]-->
 </head>
 <body>
-  
+
   <div class="row">
     <div class="twelve columns">
       <p><a href="index.html">&laquo; Back</a></p>
@@ -37,11 +37,11 @@
       </dl>
     </div>
   </div>
-  
+
   <!-- Test Foundation Components Here -->
   <div class="row">
     <div class="twelve columns">
-      
+
       <h3>Buttons</h3>
       <h4 class="subheader">Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.</h4>
       <br>
@@ -86,7 +86,7 @@
           <a href="#" class="button">Regular Button &raquo;</a>
         </div>
       </div>
-      
+
       <br><br><br>
 
       <div class="row">
@@ -122,7 +122,7 @@
           </div>
         </div>
       </div>
-      
+
       <br><br>
 
       <div class="row">
@@ -155,6 +155,16 @@
                 <li><a href="#">Last Item</a></li>
               </ul>
             </div>
+            <div href="#" class="large alert button split dropdown">
+              <a href="#">Split Button</a>
+              <span></span>
+              <ul>
+                <li><a href="#">Dropdown Item</a></li>
+                <li><a href="#">Another Dropdown Item</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Last Item</a></li>
+              </ul>
+            </div>
           </p>
           <p>Notice that in a split button, the <code>span</code> is the dropdown affordance and the main anchor is the primary button action.</p>
         </div>
@@ -162,7 +172,7 @@
 
     </div>
   </div>
-  
+
   <!-- Included JS Files -->
   <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
   <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
@@ -179,6 +189,6 @@
   <script src="../vendor/assets/javascripts/foundation/app.js"></script>
   <script type="text/javascript">
     // Page-Specific JavaScript Goes Here
-  </script> 
+  </script>
 </body>
 </html>

data/test/elements.html

@@ -23,7 +23,7 @@
 	<![endif]-->
 </head>
 <body>
-  
+
 	<div class="row">
     <div class="twelve columns">
       <p><a href="index.html">&laquo; Back</a></p>
@@ -39,12 +39,14 @@
         <dd><a href="#keystrokes">Keystrokes</a></dd>
         <dd><a href="#panels">Panels</a></dd>
         <dd><a href="#link-list">Link List</a></dd>
+        <dd><a href="#progress-bars">Progress Bars</a></dd>
+         <dd><a href="#thumbs">Thumbs</a></dd>
         <dd><a href="#video">Video</a></dd>
-        
+
       </dl>
     </div>
   </div>
-	
+
 	<!-- Test Foundation Components Here -->
   <div class="row">
     <div class="twelve columns">
@@ -95,7 +97,7 @@
           <p>Easily add the ability to show which media query you are currently viewing. To activate the viewer, make sure you have <strong>jquery.foundation.mediaQueryToggle.js</strong> linked up on your page. From there, simply add the markup to your page or press <kbd>M</kbd>. The keyboard toggle won't work on mobile devices so make sure you add the markup in those cases.</p>
         </div>
       </div>
-   
+
       <br><br>
 
       <div class="row">
@@ -127,7 +129,7 @@
           </div>
         </div>
       </div>
-      
+
       <br><br>
 
       <div class="row">
@@ -157,7 +159,7 @@
           <p><span class="radius label">Example Label</span> This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.</p>
         </div>
       </div>
-      
+
       <br><br>
 
       <div class="row">
@@ -171,11 +173,16 @@
         <br>
         <div class="eight columns">
           <p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. On a small device, the tooltips are full width and bottom aligned.</p>
+
+          <h3>Custom Options</h3>
+          <p>
+            I have <span class="has-tip-custom" title="See? Custom class here.">custom attributes.</span>
+          </p>
         </div>
-      </div>      
-      
+      </div>
+
       <br><br>
-			
+
       <div class="row">
         <div class="four columns">
           <a name="accordion"></a>
@@ -215,7 +222,7 @@
           </ul>
         </div>
       </div>
-			
+
 			<br><br>
 
       <div class="row">
@@ -229,7 +236,7 @@
           <p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>. Don't actually do it. There's more docs to read.</p>
         </div>
       </div>
-      
+
 			<br><br>
 
       <div class="row">
@@ -256,7 +263,7 @@
           </div>
         </div>
       </div>
-      
+
       <br><br>
 
       <div class="row">
@@ -276,9 +283,43 @@
           </ul>
         </div>
       </div>
-      
+
       <br><br>
-			
+
+      <div class="row">
+	    	<div class="four columns">
+          <a name="progress-bars"></a>
+          <h4>Progress Bars</h4>
+          <p>A simple way to add a progress bar to your layout. You can edit the border radius by adding a class of <code>.radius</code> or <code>.round</code>. You can change the color by adding the classes <code>.secondary</code>, <code>.success</code>, or <code>.alert</code>. If you want to adjust the length, just use a number class. For example <code>class="progress four"</code> will make the progress bar 33% wide.</p>
+        </div>
+        <br>
+        <div class="eight columns">
+          <br>
+        	<div class="progress six"><span class="meter"></span></div>
+        	<div class="radius progress success eight"><span class="meter"></span></div>
+        	<div class="nice round progress alert ten"><span class="meter"></span></div>
+          <div class="nice secondary progress"><span class="meter"></span></div>
+        </div>
+      </div>
+
+      <br><br>
+
+      <div class="row">
+        <div class="four columns">
+          <a name="thumbs"></a>
+          <h4>Image Thumbnails</h4>
+          <p>When you need an image thumbnail that is slightly more styled than just a plain old image.</p>
+        </div>
+        <div class="four mobile-two columns">
+          <a class="th" href="#"><img src="http://placehold.it/350x200"></a>
+        </div>
+        <div class="four mobile-two columns">
+          <a class="th" href="#"><img src="http://placehold.it/350x200"></a>
+        </div>
+      </div>
+
+      <br><br>
+
       <div class="row">
         <div class="four columns">
           <a name="video"></a>
@@ -314,10 +355,10 @@
           </ul>
         </div>
       </div>
-			
+
 		</div>
 	</div>
-	
+
 	<!-- Included JS Files -->
 	<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
   <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
@@ -333,7 +374,10 @@
   <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
 	<script src="../vendor/assets/javascripts/foundation/app.js"></script>
   <script type="text/javascript">
-    // Page-Specific JavaScript Goes Here
-  </script>	
+    $(document).tooltips({
+      targetClass: '.has-tip-custom, .has-tip'
+    });
+
+  </script>
 </body>
 </html>