From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 7 Mar 2016 22:34:48 +0000 (-0800)
Subject: Add .primary class to callouts and update exmaples in docs to show them full-width
X-Git-Tag: v2.0.0-rc.3~7^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=95667dba3ed225c3a849fa2afbec75e0f4f1a214;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Add .primary class to callouts and update exmaples in docs to show them full-width
---

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index cf5c33b6..90ca748e 100644
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -15,7 +15,7 @@ When using [Inky](inky.html) HTML, the `<callout>` tag will create this structur
 
 ```inky
 <callout>
-  <p>Beware of the Kraken!</p>
+  <p>Beware of the Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
 </callout>
 ```
 
@@ -26,15 +26,19 @@ When using [Inky](inky.html) HTML, the `<callout>` tag will create this structur
 The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element.
 
 ```inky
+<callout class="primary">
+  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+</callout>
+
 <callout class="success">
-  <p>Successfully avoided Kraken.</p>
+  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 
 <callout class="warning">
-  <p>There may be Krakens around.</p>
+  <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 
 <callout class="alert">
-  <p>Incoming Kraken!</p>
+  <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 ```
diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index 3b4b063d..cb7292f0 100644
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -10,6 +10,10 @@
 /// @type Color
 $callout-background: $white !default;
 
+/// Fade value for callout backgrounds.
+/// @type Number
+$callout-background-fade: 85% !default;
+
 /// Padding inside a callout.
 /// @type Length
 $callout-padding: 10px !default;
@@ -32,7 +36,7 @@ $callout-border-warning: 1px solid darken($warning-color, 20%) !default;
 
 /// Border around a callout with the `.alert` class.
 /// @type Border
-$callout-border-alert: 1px solid darken darken($alert-color, 20%) !default;
+$callout-border-alert: 1px solid darken($alert-color, 20%) !default;
 
 td.callout {
   width: 100%;
@@ -40,26 +44,32 @@ td.callout {
   padding: $callout-padding !important;
   background: $callout-background;
 
+  &.primary {
+    background: scale-color($primary-color, $lightness: $callout-background-fade) !important;
+    border: $callout-border-secondary !important;
+    color: $black !important;
+  }
+
   &.secondary {
-    background: $secondary-color !important;
+    background: scale-color($secondary-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-secondary !important;
     color: $black !important;
   }
 
   &.success {
-    background: $success-color !important;
+    background: scale-color($success-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-success !important;
     color: $white !important;
   }
 
   &.warning {
-    background: $warning-color !important;
+    background: scale-color($warning-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-warning !important;
     color: $white !important;
   }
 
   &.alert {
-    background: $alert-color !important;
+    background: scale-color($alert-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-alert !important;
     color: $white !important;
   }
diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 466e67b9..c5acc4ef 100644
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -109,12 +109,13 @@ $button-border: 2px solid $button-background;
 // ----------
 
 $callout-background: $white;
+$callout-background-fade: 85%;
 $callout-padding: 10px;
 $callout-border: 1px solid darken($callout-background, 20%);
 $callout-border-secondary: 1px solid darken($secondary-color, 20%);
 $callout-border-success: 1px solid darken($success-color, 20%);
 $callout-border-warning: 1px solid darken($warning-color, 20%);
-$callout-border-alert: 1px solid darken darken($alert-color, 20%);
+$callout-border-alert: 1px solid darken($alert-color, 20%);
 
 // 8. Inline List
 // --------------