From 18af0ed805ebe7a18a1b77dd09cd2e1a33a5b469 Mon Sep 17 00:00:00 2001 From: James Fenwick Date: Fri, 29 Sep 2017 16:27:00 +0100 Subject: [PATCH 1/4] Allow inline `` elements Move the block styling and reduced font size on `` to only apply when it is a child of `
`. Fixes issue #10226 --- scss/typography/_base.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss index 000bd33544..20e5f0656f 100644 --- a/scss/typography/_base.scss +++ b/scss/typography/_base.scss @@ -455,17 +455,21 @@ $abbr-underline: 1px dotted $black !default; line-height: $paragraph-lineheight; color: $blockquote-color; } + + // Citations + cite { + display: block; + font-size: $cite-font-size; + + &:before { + content: $cite-pseudo-content; + } + } } - // Citations + // Inline Citations cite { - display: block; - font-size: $cite-font-size; color: $cite-color; - - &:before { - content: $cite-pseudo-content; - } } // Abbreviations From 4be04b80605668548a8821b0a56d9b25cab2c733 Mon Sep 17 00:00:00 2001 From: James Fenwick Date: Wed, 1 Nov 2017 12:36:15 +0000 Subject: [PATCH 2/4] Add mixin to restore old behavior --- scss/typography/_base.scss | 15 +-------------- scss/typography/_helpers.scss | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss index 20e5f0656f..fc04a15145 100644 --- a/scss/typography/_base.scss +++ b/scss/typography/_base.scss @@ -215,18 +215,10 @@ $blockquote-padding: rem-calc(9 20 0 19) !default; /// @type List $blockquote-border: 1px solid $medium-gray !default; -/// Font size for `` elements. -/// @type Number -$cite-font-size: rem-calc(13) !default; - /// Text color for `` elements. /// @type Color $cite-color: $dark-gray !default; -/// Pseudo content for `` elements. -/// @type String -$cite-pseudo-content: '\2014 \0020' !default; - /// Font family for `` elements. /// @type String | List $keystroke-font: $font-family-monospace !default; @@ -458,12 +450,7 @@ $abbr-underline: 1px dotted $black !default; // Citations cite { - display: block; - font-size: $cite-font-size; - - &:before { - content: $cite-pseudo-content; - } + @include block-citation; } } diff --git a/scss/typography/_helpers.scss b/scss/typography/_helpers.scss index f34ac03ac4..7f05f0d651 100644 --- a/scss/typography/_helpers.scss +++ b/scss/typography/_helpers.scss @@ -6,6 +6,15 @@ /// @group typography-helpers //// + +/// Font size for `` elements. +/// @type Number +$cite-font-size: rem-calc(13) !default; + +/// Pseudo content for `` elements. +/// @type String +$cite-pseudo-content: '\2014 \0020' !default; + /// Default font size for lead paragraphs. /// @type Number $lead-font-size: $global-font-size * 1.25 !default; @@ -78,3 +87,13 @@ $stat-font-size: 2.5rem !default; } } } + +@mixin block-citation { + // Use to restore the block version of cite elements + display: block; + font-size: $cite-font-size; + + &:before { + content: $cite-pseudo-content; + } +} From c9fd9d7344cf3b391af75d5cf1d55dee8cd60282 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Tue, 26 Dec 2017 21:50:05 +0100 Subject: [PATCH 3/4] feat: make cite-block an optional component & use it as default for Note: this remove the backward incompability included in 18af0ed805ebe7a18a1b77dd09cd2e1a33a5b469 --- scss/typography/_base.scss | 23 +++++++++---------- scss/typography/_helpers.scss | 42 +++++++++++++++++++++-------------- 2 files changed, 36 insertions(+), 29 deletions(-) diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss index fc04a15145..d82a460cf6 100644 --- 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,9 +215,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default; /// @type List $blockquote-border: 1px solid $medium-gray !default; -/// Text color for `` elements. -/// @type Color -$cite-color: $dark-gray !default; +/// Use the `.cite-block` component as default for `` elements. +/// @type Boolean +$enable-cite-block: true; /// Font family for `` elements. /// @type String | List @@ -447,16 +447,15 @@ $abbr-underline: 1px dotted $black !default; line-height: $paragraph-lineheight; color: $blockquote-color; } - - // Citations - cite { - @include block-citation; - } } // Inline Citations - cite { - color: $cite-color; + @if ($enable-cite-block == true) { + cite { + // Extending a class is not recommanded. + // TODO: Break the typography-base/typography-helpers separation + @extend .cite-block; + } } // Abbreviations @@ -470,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 index 7f05f0d651..74edffe6e1 100644 --- a/scss/typography/_helpers.scss +++ b/scss/typography/_helpers.scss @@ -6,15 +6,6 @@ /// @group typography-helpers //// - -/// Font size for `` elements. -/// @type Number -$cite-font-size: rem-calc(13) !default; - -/// Pseudo content for `` elements. -/// @type String -$cite-pseudo-content: '\2014 \0020' !default; - /// Default font size for lead paragraphs. /// @type Number $lead-font-size: $global-font-size * 1.25 !default; @@ -47,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
element, like this: @@ -86,14 +100,8 @@ $stat-font-size: 2.5rem !default; list-style: none; } } -} -@mixin block-citation { - // Use to restore the block version of cite elements - display: block; - font-size: $cite-font-size; - - &:before { - content: $cite-pseudo-content; + .cite-block { + @include cite-block; } } From d5efb6f4e5e033e6ecfab1d280c2fd96d95298b3 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Tue, 26 Dec 2017 22:42:03 +0100 Subject: [PATCH 4/4] docs: add docs about the `cite-block` component --- docs/pages/typography-base.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md index 84e761e7c9..1e1e7b22d8 100644 --- a/docs/pages/typography-base.md +++ b/docs/pages/typography-base.md @@ -261,6 +261,10 @@ A definition list (`
`) 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. +
+ By default, `` takes the look of the `.cite-block` component. In Sass, you can customize it with `$cite-*` variables or disable it by setting `$enable-cite-block` to false. +
+
edit on codepen button