diff options
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components/_typography.scss')
| -rwxr-xr-x | afb-client/bower_components/foundation-apps/scss/components/_typography.scss | 345 |
1 files changed, 345 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_typography.scss b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss new file mode 100755 index 0000000..8e64a89 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss @@ -0,0 +1,345 @@ +/* + TYPOGRAPHY + ---------- + + Includes typographic resets for many common elements, and a few helper classes. + - Headers + - Subheaders + - Lead paragraphs + - Ordered/unordered lists + - Code samples + - Anchors + - Dividers + - Blockquotes + - Acronyms +*/ + +/// @Foundation.settings +// Typography +// We use these to control header font styles +$header-font-family: $body-font-family !default; +$header-font-weight: $font-weight-normal !default; +$header-font-style: $font-weight-normal !default; +$header-font-color: #222 !default; +$header-line-height: 1.4 !default; +$header-top-margin: .2rem !default; +$header-bottom-margin: .5rem !default; +$header-text-rendering: optimizeLegibility !default; + +// We use these to control header font sizes +$h1-font-size: rem-calc(44) !default; +$h2-font-size: rem-calc(37) !default; +$h3-font-size: rem-calc(27) !default; +$h4-font-size: rem-calc(23) !default; +$h5-font-size: rem-calc(18) !default; +$h6-font-size: 1rem !default; + +// We use these to control header size reduction on small screens +$h1-font-reduction: rem-calc(10) !default; +$h2-font-reduction: rem-calc(10) !default; +$h3-font-reduction: rem-calc(5) !default; +$h4-font-reduction: rem-calc(5) !default; +$h5-font-reduction: 0 !default; +$h6-font-reduction: 0 !default; + +// These control how subheaders are styled. +$subheader-line-height: 1.4 !default; +$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default; +$subheader-font-weight: $font-weight-normal !default; +$subheader-top-margin: .2rem !default; +$subheader-bottom-margin: .5rem !default; + +// A general <small> styling +$small-font-size: 60% !default; +$small-font-color: scale-color($header-font-color, $lightness: 35%) !default; + +// We use these to style paragraphs +$paragraph-font-family: inherit !default; +$paragraph-font-weight: $font-weight-normal !default; +$paragraph-font-size: 1rem !default; +$paragraph-line-height: 1.6 !default; +$paragraph-margin-bottom: rem-calc(20) !default; +$paragraph-aside-font-size: rem-calc(14) !default; +$paragraph-aside-line-height: 1.35 !default; +$paragraph-aside-font-style: italic !default; +$paragraph-text-rendering: optimizeLegibility !default; + +// We use these to style <code> tags +$code-color: grayscale($primary-color) !default; +$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default; +$code-font-weight: $font-weight-normal !default; +$code-background-color: scale-color($secondary-color, $lightness: 70%) !default; +$code-border-size: 1px !default; +$code-border-style: solid !default; +$code-border-color: scale-color($code-background-color, $lightness: -10%) !default; +$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default; + +// We use these to style anchors +$anchor-text-decoration: none !default; +$anchor-text-decoration-hover: none !default; +$anchor-font-color: $primary-color !default; +$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default; + +// We use these to style the <hr> element +$hr-border-width: 1px !default; +$hr-border-style: solid !default; +$hr-border-color: #ddd !default; +$hr-margin: rem-calc(20) !default; + +// We use these to style lists +$list-font-family: $paragraph-font-family !default; +$list-font-size: $paragraph-font-size !default; +$list-line-height: $paragraph-line-height !default; +$list-margin-bottom: $paragraph-margin-bottom !default; +$list-style-position: outside !default; +$list-side-margin: 1.1rem !default; +$list-ordered-side-margin: 1.4rem !default; +$list-side-margin-no-bullet: 0 !default; +$list-nested-margin: rem-calc(20) !default; +$definition-list-header-weight: $font-weight-bold !default; +$definition-list-header-margin-bottom: .3rem !default; +$definition-list-margin-bottom: rem-calc(12) !default; + +// We use these to style blockquotes +$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default; +$blockquote-padding: rem-calc(9 20 0 19) !default; +$blockquote-border: 1px solid #ddd !default; +$blockquote-cite-font-size: rem-calc(13) !default; +$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default; +$blockquote-cite-link-color: $blockquote-cite-font-color !default; + +// Acronym styles +$acronym-underline: 1px dotted #ddd !default; +/// + +@mixin lead { + font-size: $paragraph-font-size + rem-calc(3.5); + line-height: 1.6; +} + +@mixin subheader { + line-height: $subheader-line-height; + color: $subheader-font-color; + font-weight: $subheader-font-weight; + margin-top: $subheader-top-margin; + margin-bottom: $subheader-bottom-margin; +} + +@include exports(typography) { + /* 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; + } + + /* Default Link Styles */ + a { + color: $anchor-font-color; + text-decoration: $anchor-text-decoration; + line-height: inherit; + + &[ui-sref] { + cursor: pointer; + } + + &:hover, + &:focus { + color: $anchor-font-color-hover; + @if $anchor-text-decoration-hover != $anchor-text-decoration { + text-decoration: $anchor-text-decoration-hover; + } + } + + img { border:none; } + } + + /* Default paragraph styles */ + p { + font-family: $paragraph-font-family; + font-weight: $paragraph-font-weight; + font-size: $paragraph-font-size; + line-height: $paragraph-line-height; + margin-bottom: $paragraph-margin-bottom; + text-rendering: $paragraph-text-rendering; + + &.lead { @include lead; } + + & aside { + font-size: $paragraph-aside-font-size; + line-height: $paragraph-aside-line-height; + font-style: $paragraph-aside-font-style; + } + } + + /* Default header styles */ + h1, h2, h3, h4, h5, h6 { + font-family: $header-font-family; + font-weight: $header-font-weight; + font-style: $header-font-style; + color: $header-font-color; + text-rendering: $header-text-rendering; + margin-top: $header-top-margin; + margin-bottom: $header-bottom-margin; + line-height: $header-line-height; + + small { + font-size: $small-font-size; + color: $small-font-color; + line-height: 0; + } + } + + h1 { font-size: $h1-font-size - $h1-font-reduction; } + h2 { font-size: $h2-font-size - $h2-font-reduction; } + h3 { font-size: $h3-font-size - $h3-font-reduction; } + h4 { font-size: $h4-font-size - $h4-font-reduction; } + h5 { font-size: $h5-font-size - $h5-font-reduction; } + h6 { font-size: $h6-font-size - $h6-font-reduction; } + + .subheader { @include subheader; } + + hr { + border: $hr-border-style $hr-border-color; + border-width: $hr-border-width 0 0; + clear: both; + margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width)); + height: 0; + } + + /* Helpful Typography Defaults */ + em, + i { + font-style: italic; + line-height: inherit; + } + + strong, + b { + font-weight: $font-weight-bold; + line-height: inherit; + } + + small { + font-size: $small-font-size; + color: $small-font-color; + line-height: inherit; + } + + code { + font-family: $code-font-family; + font-weight: $code-font-weight; + color: $code-color; + background-color: $code-background-color; + border-width: $code-border-size; + border-style: $code-border-style; + border-color: $code-border-color; + padding: $code-padding; + } + + /* Lists */ + ul, + ol, + dl { + font-size: $list-font-size; + line-height: $list-line-height; + margin-bottom: $list-margin-bottom; + list-style-position: $list-style-position; + font-family: $list-font-family; + } + + /* Lists */ + ul, ol { + margin-left: $list-side-margin; + li { + ul, + ol { + margin-left: $list-nested-margin; + margin-bottom: 0; + } + } + } + + /* Lists without bullets */ + ul.no-bullet { + &, li ul, li ol { + list-style-type: none; + } + margin-left: $list-side-margin-no-bullet; + } + + /* Definition Lists */ + dl { + dt { + margin-bottom: $definition-list-header-margin-bottom; + font-weight: $definition-list-header-weight; + } + dd { margin-bottom: $definition-list-margin-bottom; } + } + + /* Abbreviations */ + abbr, + acronym { + text-transform: uppercase; + font-size: 90%; + color: $body-font-color; + border-bottom: $acronym-underline; + cursor: help; + } + abbr { + text-transform: none; + } + + /* Blockquotes */ + blockquote { + margin: 0 0 $paragraph-margin-bottom; + padding: $blockquote-padding; + border-left: $blockquote-border; + + cite { + display: block; + font-size: $blockquote-cite-font-size; + color: $blockquote-cite-font-color; + &:before { + content: "\2014 \0020"; + } + + a, + a:visited { + color: $blockquote-cite-link-color; + } + } + } + blockquote, + blockquote p { + line-height: $paragraph-line-height; + color: $blockquote-font-color; + } + + @include breakpoint(medium) { + h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; } + h1 { font-size: $h1-font-size; } + h2 { font-size: $h2-font-size; } + h3 { font-size: $h3-font-size; } + h4 { font-size: $h4-font-size; } + h5 { font-size: $h5-font-size; } + h6 { font-size: $h6-font-size; } + } +} |