From: RafiBomb <rafi@zurb.com>
Date: Mon, 21 Mar 2016 21:31:26 +0000 (-0700)
Subject: adds thumbnail styles and docs
X-Git-Tag: v2.0.0-rc.4~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=19a0926d7ee0cff46ece7d1907268c1f1f12bf3e;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

adds thumbnail styles and docs
---

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 32822207..57552b4b 100644
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -85,6 +85,10 @@ In Inky HTML, these classes are added for you.
 <columns large="4">Three</columns>
 ```
 
+### Expander
+
+The `.expander` prevents a rendering bug in Outlook that sometimes keeps the columns from expanding to full width. Instead of ignoring the width attribute and politely taking up only as much space as the content dictates (default `<th>` behavior), the presence of the expander `<th>` causes the content `<th>` to become “greedy” and take up as much space as is given to it, up to the value specified in the width (which is 100%). They’re set to not display, but they kick the total width up over 100%, which forces their sibling `<th>` to expand fully.
+
 ---
 
 ## Collapsing
diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index 27aa58d7..5eb0c3bf 100644
--- a/docs/pages/thumbnail.md
+++ b/docs/pages/thumbnail.md
@@ -3,12 +3,16 @@ title: Thumbnail
 description: Spruce up an image tag with our thumbnail style.
 ---
 
+The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>` that wraps it. Make sure the `<img>` has an alt attribute that describes the contents of the image.
+
 The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
 
 ```inky_example
-<table class="thumbnail">
+<img src="http://placehold.it/200x200" class="thumbnail" /></td>
+```
+
+<!-- <table class="thumbnail">
   <tr>
     <td><img src="//placehold.it/300x300" class="thumbnail" /></td>
   </tr>
-</table>
-```
+</table> -->
\ No newline at end of file
diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index b8a26e06..aab94ef2 100644
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -5,7 +5,7 @@ descripiton: Selectively show content for different screen sizes.
 
 Visibility classes allow you to control what content appears on what screen size.
 
-Foundation for Emails has two breakpoints: *small*, which is any email client under 600 pixels wide, and *large*, any client over 600 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
+Foundation for Emails has two breakpoints: *small*, which is any email client under 596 pixels wide, and *large*, any client over 596 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
 
 Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibiility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007/2010/2013.
 
diff --git a/scss/components/_thumbnail.scss b/scss/components/_thumbnail.scss
index 7dd7dc04..a207fd7a 100644
--- a/scss/components/_thumbnail.scss
+++ b/scss/components/_thumbnail.scss
@@ -6,20 +6,44 @@
 /// @group thumbnial
 ////
 
-/// Box shadow for thumbnails. **The color must be an RGB or RGBA value.**
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: solid 4px $white !default;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin !default;
+
+/// Box shadow under thumbnail images.
 /// @type Shadow
 $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
 
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out !default;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius !default;
+
+/// Adds thumbnail styles to an element.
 .thumbnail {
+  border: $thumbnail-border;
+  box-shadow: $thumbnail-shadow;
   display: inline-block;
-  border-collapse: separate;
-
-  img {
-    border-collapse: separate;
-  }
+  line-height: 0;
+  max-width: 100%;
+  transition: $thumbnail-transition;
+  border-radius: $thumbnail-radius;
+  margin-bottom: $thumbnail-margin-bottom;
 
-  &:hover, &:focus {
-    // Only supported iphone iOS, outlook.com, apple mail 6.5. But hey, progressive enhancements.
-    box-shadow: $thumbnail-shadow;
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
   }
 }
+