Merge pull request foundation#10687 from jmsfwk/develop

Allow inline `<cite>` elements
ncoden · Dec 26, 2017 · 60d47ab · 60d47ab
2 parents bb94d37 + d5efb6f
commit 60d47ab
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md
@@ -261,6 +261,10 @@ A definition list (`<dl>`) is used to display name-value pairs, like metadata or
 
 Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.
 
+<div class="callout">
+  By default, `<cite>` takes the look of the `.cite-block` component. In Sass, you can customize it with <a href="#sass-variables">`$cite-*` variables</a> or disable it by setting `$enable-cite-block` to false.
+</div>
+
 <div class="docs-codepen-container">
 <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/ZKoJMb" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>

diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss
@@ -79,7 +79,7 @@ $header-styles: (
   @each $size, $headers in $header-sizes {
     $header-map: ();
     @each $header, $font-size in $headers {
-      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));  
+      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
     }
     $header-styles: map-merge($header-styles, ($size: $header-map));
   }
@@ -215,17 +215,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default;
 /// @type List
 $blockquote-border: 1px solid $medium-gray !default;
 
-/// Font size for `<cite>` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Text color for `<cite>` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
-
-/// Pseudo content for `<cite>` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
+/// Use the `.cite-block` component as default for `<cite>` elements.
+/// @type Boolean
+$enable-cite-block: true;
 
 /// Font family for `<kbd>` elements.
 /// @type String | List
@@ -457,14 +449,12 @@ $abbr-underline: 1px dotted $black !default;
     }
   }
 
-  // Citations
-  cite {
-    display: block;
-    font-size: $cite-font-size;
-    color: $cite-color;
-
-    &:before {
-      content: $cite-pseudo-content;
+  // Inline Citations
+  @if ($enable-cite-block == true) {
+    cite {
+      // Extending a class is not recommanded.
+      // TODO: Break the typography-base/typography-helpers separation
+      @extend .cite-block;
     }
   }
 
@@ -479,7 +469,7 @@ $abbr-underline: 1px dotted $black !default;
   figure {
     margin: 0;
   }
-  
+
   // Code
   code {
     padding: $code-padding;

diff --git a/scss/typography/_helpers.scss b/scss/typography/_helpers.scss
@@ -38,6 +38,29 @@ $subheader-margin-bottom: 0.5rem !default;
 /// @type Number
 $stat-font-size: 2.5rem !default;
 
+/// Text color for `.cite-block` component.
+/// @type Color
+$cite-color: $dark-gray !default;
+
+/// Font size for `.cite-block` component.
+/// @type Number
+$cite-font-size: rem-calc(13) !default;
+
+/// Pseudo content for `.cite-block` component.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
+
+@mixin cite-block {
+  display: block;
+  color: $cite-color;
+  font-size: $cite-font-size;
+
+  &:before {
+    content: $cite-pseudo-content;
+  }
+}
+
 @mixin foundation-typography-helpers {
   // Use to create a subheading under a main header
   // Make sure you pair the two elements in a <header> element, like this:
@@ -77,4 +100,8 @@ $stat-font-size: 2.5rem !default;
       list-style: none;
     }
   }
+
+  .cite-block {
+    @include cite-block;
+  }
 }