// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source
//// /// @group typography-base ////
// Base Typography // - - - - - - - - - - - - - - - // These are styles applied to basic HTML tags, including: // - Paragraphs <p> // - Bold/italics <b> <strong> <i> <em> // - Small text <small> // - Headings <h1>-<h6> // - Anchors <a> // - Dividers <hr> // - Lists <ul> <ol> <dl> // - Blockquotes <blockquote> // - Code blocks <code> // - Abbreviations <abbr> // - Citations <cite> // - Keystrokes <kbd>
/// Font family for header elements. /// @type String | List $header-font-family: $body-font-family !default;
/// Font weight of headers. /// @type String $header-font-weight: $global-weight-normal !default;
/// Font style (e.g. italicized) of headers. /// @type String $header-font-style: normal !default;
/// Font stack used for elements that use monospaced type, such as code samples /// @type String | List $font-family-monospace: Consolas, ‘Liberation Mono’, Courier, monospace !default;
/// Color of headers. /// @type Color $header-color: inherit !default;
/// Line height of headers. /// @type Number $header-lineheight: 1.4 !default;
/// Bottom margin of headers. /// @type Number $header-margin-bottom: 0.5rem !default;
/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles. /// @type Map $header-styles: (
small: ( 'h1': ('font-size': 24), 'h2': ('font-size': 20), 'h3': ('font-size': 19), 'h4': ('font-size': 18), 'h5': ('font-size': 17), 'h6': ('font-size': 16), ), medium: ( 'h1': ('font-size': 48), 'h2': ('font-size': 40), 'h3': ('font-size': 31), 'h4': ('font-size': 25), 'h5': ('font-size': 20), 'h6': ('font-size': 16), ),
) !default;
// $header-styles map is built from $header-sizes in order to ensure downward compatibility // when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss @function build_from_header-sizes($header-sizes) {
@warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.'; $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-styles: map-merge($header-styles, ($size: $header-map)); } @return $header-styles;
}
// If it exists $headers-sizes is used to build $header-styles. See the documentation. @if variable-exists(header-sizes) {
$header-styles: build_from_header-sizes($header-sizes);
}
/// Text rendering method of headers. /// @type String $header-text-rendering: optimizeLegibility !default;
/// Font size of ‘<small>` elements. /// @type Number $small-font-size: 80% !default;
/// Color of ‘<small>` elements when placed inside headers. /// @type Color $header-small-font-color: $medium-gray !default;
/// Line height of text inside ‘<p>` elements. /// @type Number $paragraph-lineheight: 1.6 !default;
/// Bottom margin of paragraphs. /// @type Number $paragraph-margin-bottom: 1rem !default;
/// Text rendering method for paragraph text. /// @type String $paragraph-text-rendering: optimizeLegibility !default;
/// Text color of code samples. /// @type Color $code-color: $black !default;
/// Font family of code samples. /// @type String | List $code-font-family: $font-family-monospace !default;
/// Font weight of text in code samples. /// @type String $code-font-weight: $global-weight-normal !default;
/// Background color of code samples. /// @type Color $code-background: $light-gray !default;
/// Border around code samples. /// @type List $code-border: 1px solid $medium-gray !default;
/// Padding around text of code samples. /// @type Number | List $code-padding: rem-calc(2 5 1) !default;
/// Default color for links. /// @type Color $anchor-color: $primary-color !default;
/// Default color for links on hover. /// @type Color $anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
/// Default text deocration for links. /// @type String $anchor-text-decoration: none !default;
/// Default text decoration for links on hover. /// @type String $anchor-text-decoration-hover: none !default;
/// Maximum width of a divider. /// @type Number $hr-width: $global-width !default;
/// Default border for a divider. /// @type List $hr-border: 1px solid $medium-gray !default;
/// Default margin for a divider. /// @type Number | List $hr-margin: rem-calc(20) auto !default;
/// Line height for items in a list. /// @type Number $list-lineheight: $paragraph-lineheight !default;
/// Bottom margin for items in a list. /// @type Number $list-margin-bottom: $paragraph-margin-bottom !default;
/// Bullet type to use for unordered lists (e.g., ‘square`, `circle`, `disc`). /// @type String $list-style-type: disc !default;
/// Positioning for bullets on unordered list items. /// @type String $list-style-position: outside !default;
/// Left (or right) margin for lists. /// @type Number $list-side-margin: 1.25rem !default;
/// Left (or right) margin for a list inside a list. /// @type Number $list-nested-side-margin: 1.25rem !default;
/// Bottom margin for ‘<dl>` elements. /// @type Number $defnlist-margin-bottom: 1rem !default;
/// Font weight for ‘<dt>` elements. /// @type String $defnlist-term-weight: $global-weight-bold !default;
/// Spacing between ‘<dt>` and `<dd>` elements. /// @type Number $defnlist-term-margin-bottom: 0.3rem !default;
/// Text color of ‘<blockquote>` elements. /// @type Color $blockquote-color: $dark-gray !default;
/// Padding inside a ‘<blockquote>` element. /// @type Number | List $blockquote-padding: rem-calc(9 20 0 19) !default;
/// Side border for ‘<blockquote>` elements. /// @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;
/// Font family for ‘<kbd>` elements. /// @type String | List $keystroke-font: $font-family-monospace !default;
/// Text color for ‘<kbd>` elements. /// @type Color $keystroke-color: $black !default;
/// Background color for ‘<kbd>` elements. /// @type Color $keystroke-background: $light-gray !default;
/// Padding for ‘<kbd>` elements. /// @type Number | List $keystroke-padding: rem-calc(2 4 0) !default;
/// Border radius for ‘<kbd>` elements. /// @type Number | List $keystroke-radius: $global-radius !default;
/// Bottom border style for ‘<abbr>` elements. /// @type List $abbr-underline: 1px dotted $black !default;
@mixin foundation-typography-base {
// Typography resets div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; } // Paragraphs p { margin-bottom: $paragraph-margin-bottom; font-size: inherit; line-height: $paragraph-lineheight; text-rendering: $paragraph-text-rendering; } // Emphasized text em, i { font-style: italic; line-height: inherit; } // Strong text strong, b { font-weight: $global-weight-bold; line-height: inherit; } // Small text small { font-size: $small-font-size; line-height: inherit; } // Headings h1, h2, h3, h4, h5, h6 { font-family: $header-font-family; font-style: $header-font-style; font-weight: $header-font-weight; color: $header-color; text-rendering: $header-text-rendering; small { line-height: 0; color: $header-small-font-color; } } // Heading styles @each $size, $headers in $header-styles { @include breakpoint($size) { @each $header, $header-defs in $headers { $font-size-temp: 1rem; #{$header} { @if map-has-key($header-defs, font-size) { $font-size-temp: rem-calc(map-get($header-defs, font-size)); font-size: $font-size-temp; } @else if map-has-key($header-defs, fs) { $font-size-temp: rem-calc(map-get($header-defs, fs)); font-size: $font-size-temp; } @else if $size == $-zf-zero-breakpoint { font-size: $font-size-temp; } @if map-has-key($header-defs, line-height) { line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp); } @else if map-has-key($header-defs, lh) { line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp); } @else if $size == $-zf-zero-breakpoint { line-height: unitless-calc($header-lineheight, $font-size-temp); } @if map-has-key($header-defs, margin-top) { margin-top: rem-calc(map-get($header-defs, margin-top)); } @else if map-has-key($header-defs, mt) { margin-top: rem-calc(map-get($header-defs, mt)); } @else if $size == $-zf-zero-breakpoint { margin-top: 0; } @if map-has-key($header-defs, margin-bottom) { margin-bottom: rem-calc(map-get($header-defs, margin-bottom)); } @else if map-has-key($header-defs, mb) { margin-bottom: rem-calc(map-get($header-defs, mb)); } @else if $size == $-zf-zero-breakpoint { margin-bottom: rem-calc($header-margin-bottom); } } } } } // Links a { line-height: inherit; color: $anchor-color; text-decoration: $anchor-text-decoration; cursor: pointer; &:hover, &:focus { color: $anchor-color-hover; @if $anchor-text-decoration-hover != $anchor-text-decoration { text-decoration: $anchor-text-decoration-hover; } } img { border: 0; } } // Horizontal rule hr { clear: both; max-width: $hr-width; height: 0; margin: $hr-margin; border-top: 0; border-right: 0; border-bottom: $hr-border; border-left: 0; } // Lists ul, ol, dl { margin-bottom: $list-margin-bottom; list-style-position: $list-style-position; line-height: $list-lineheight; } // List items li { font-size: inherit; } // Unordered lists ul { margin-#{$global-left}: $list-side-margin; list-style-type: $list-style-type; } // Ordered lists ol { margin-#{$global-left}: $list-side-margin; } // Nested unordered/ordered lists ul, ol { & & { margin-#{$global-left}: $list-nested-side-margin; margin-bottom: 0; } } // Definition lists dl { margin-bottom: $defnlist-margin-bottom; dt { margin-bottom: $defnlist-term-margin-bottom; font-weight: $defnlist-term-weight; } } // Blockquotes blockquote { margin: 0 0 $paragraph-margin-bottom; padding: $blockquote-padding; border-#{$global-left}: $blockquote-border; &, p { line-height: $paragraph-lineheight; color: $blockquote-color; } } // Citations cite { display: block; font-size: $cite-font-size; color: $cite-color; &:before { content: $cite-pseudo-content; } } // Abbreviations abbr { border-bottom: $abbr-underline; color: $body-font-color; cursor: help; } // Figures figure { margin: 0; } // Code code { padding: $code-padding; border: $code-border; background-color: $code-background; font-family: $code-font-family; font-weight: $code-font-weight; color: $code-color; } // Keystrokes kbd { margin: 0; padding: $keystroke-padding; background-color: $keystroke-background; font-family: $keystroke-font; color: $keystroke-color; @if has-value($keystroke-radius) { border-radius: $keystroke-radius; } }
}