afm-client/bower_components/foundation-apps/scss/components/_typography.scss

   1 /*\r
   2   TYPOGRAPHY\r
   3   ----------\r
   4 \r
   5   Includes typographic resets for many common elements, and a few helper classes.\r
   6    - Headers\r
   7    - Subheaders\r
   8    - Lead paragraphs\r
   9    - Ordered/unordered lists\r
  10    - Code samples\r
  11    - Anchors\r
  12    - Dividers\r
  13    - Blockquotes\r
  14    - Acronyms\r
  15 */\r
  16 \r
  17 /// @Foundation.settings\r
  18 // Typography\r
  19 // We use these to control header font styles\r
  20 $header-font-family: $body-font-family !default;\r
  21 $header-font-weight: $font-weight-normal !default;\r
  22 $header-font-style: $font-weight-normal !default;\r
  23 $header-font-color: #222 !default;\r
  24 $header-line-height: 1.4 !default;\r
  25 $header-top-margin: .2rem !default;\r
  26 $header-bottom-margin: .5rem !default;\r
  27 $header-text-rendering: optimizeLegibility !default;\r
  28 \r
  29 // We use these to control header font sizes\r
  30 $h1-font-size: rem-calc(44) !default;\r
  31 $h2-font-size: rem-calc(37) !default;\r
  32 $h3-font-size: rem-calc(27) !default;\r
  33 $h4-font-size: rem-calc(23) !default;\r
  34 $h5-font-size: rem-calc(18) !default;\r
  35 $h6-font-size: 1rem !default;\r
  36 \r
  37 // We use these to control header size reduction on small screens\r
  38 $h1-font-reduction: rem-calc(10) !default;\r
  39 $h2-font-reduction: rem-calc(10) !default;\r
  40 $h3-font-reduction: rem-calc(5) !default;\r
  41 $h4-font-reduction: rem-calc(5) !default;\r
  42 $h5-font-reduction: 0 !default;\r
  43 $h6-font-reduction: 0 !default;\r
  44 \r
  45 // These control how subheaders are styled.\r
  46 $subheader-line-height: 1.4 !default;\r
  47 $subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
  48 $subheader-font-weight: $font-weight-normal !default;\r
  49 $subheader-top-margin: .2rem !default;\r
  50 $subheader-bottom-margin: .5rem !default;\r
  51 \r
  52 // A general <small> styling\r
  53 $small-font-size: 60% !default;\r
  54 $small-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
  55 \r
  56 // We use these to style paragraphs\r
  57 $paragraph-font-family: inherit !default;\r
  58 $paragraph-font-weight: $font-weight-normal !default;\r
  59 $paragraph-font-size: 1rem !default;\r
  60 $paragraph-line-height: 1.6 !default;\r
  61 $paragraph-margin-bottom: rem-calc(20) !default;\r
  62 $paragraph-aside-font-size: rem-calc(14) !default;\r
  63 $paragraph-aside-line-height: 1.35 !default;\r
  64 $paragraph-aside-font-style: italic !default;\r
  65 $paragraph-text-rendering: optimizeLegibility !default;\r
  66 \r
  67 // We use these to style <code> tags\r
  68 $code-color: grayscale($primary-color) !default;\r
  69 $code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;\r
  70 $code-font-weight: $font-weight-normal !default;\r
  71 $code-background-color: scale-color($secondary-color, $lightness: 70%) !default;\r
  72 $code-border-size: 1px !default;\r
  73 $code-border-style: solid !default;\r
  74 $code-border-color: scale-color($code-background-color, $lightness: -10%) !default;\r
  75 $code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;\r
  76 \r
  77 // We use these to style anchors\r
  78 $anchor-text-decoration: none !default;\r
  79 $anchor-text-decoration-hover: none !default;\r
  80 $anchor-font-color: $primary-color !default;\r
  81 $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;\r
  82 \r
  83 // We use these to style the <hr> element\r
  84 $hr-border-width: 1px !default;\r
  85 $hr-border-style: solid !default;\r
  86 $hr-border-color: #ddd !default;\r
  87 $hr-margin: rem-calc(20) !default;\r
  88 \r
  89 // We use these to style lists\r
  90 $list-font-family: $paragraph-font-family !default;\r
  91 $list-font-size: $paragraph-font-size !default;\r
  92 $list-line-height: $paragraph-line-height !default;\r
  93 $list-margin-bottom: $paragraph-margin-bottom !default;\r
  94 $list-style-position: outside !default;\r
  95 $list-side-margin: 1.1rem !default;\r
  96 $list-ordered-side-margin: 1.4rem !default;\r
  97 $list-side-margin-no-bullet: 0 !default;\r
  98 $list-nested-margin: rem-calc(20) !default;\r
  99 $definition-list-header-weight: $font-weight-bold !default;\r
 100 $definition-list-header-margin-bottom: .3rem !default;\r
 101 $definition-list-margin-bottom: rem-calc(12) !default;\r
 102 \r
 103 // We use these to style blockquotes\r
 104 $blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
 105 $blockquote-padding: rem-calc(9 20 0 19) !default;\r
 106 $blockquote-border: 1px solid #ddd !default;\r
 107 $blockquote-cite-font-size: rem-calc(13) !default;\r
 108 $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;\r
 109 $blockquote-cite-link-color: $blockquote-cite-font-color !default;\r
 110 \r
 111 // Acronym styles\r
 112 $acronym-underline: 1px dotted #ddd !default;\r
 113 ///\r
 114 \r
 115 @mixin lead {\r
 116   font-size: $paragraph-font-size + rem-calc(3.5);\r
 117   line-height: 1.6;\r
 118 }\r
 119 \r
 120 @mixin subheader {\r
 121   line-height: $subheader-line-height;\r
 122   color: $subheader-font-color;\r
 123   font-weight: $subheader-font-weight;\r
 124   margin-top: $subheader-top-margin;\r
 125   margin-bottom: $subheader-bottom-margin;\r
 126 }\r
 127 \r
 128 @include exports(typography) {\r
 129   /* Typography resets */\r
 130   div,\r
 131   dl,\r
 132   dt,\r
 133   dd,\r
 134   ul,\r
 135   ol,\r
 136   li,\r
 137   h1,\r
 138   h2,\r
 139   h3,\r
 140   h4,\r
 141   h5,\r
 142   h6,\r
 143   pre,\r
 144   form,\r
 145   p,\r
 146   blockquote,\r
 147   th,\r
 148   td {\r
 149     margin:0;\r
 150     padding:0;\r
 151   }\r
 152 \r
 153   /* Default Link Styles */\r
 154   a {\r
 155     color: $anchor-font-color;\r
 156     text-decoration: $anchor-text-decoration;\r
 157     line-height: inherit;\r
 158 \r
 159     &[ui-sref] {\r
 160       cursor: pointer;\r
 161     }\r
 162 \r
 163     &:hover,\r
 164     &:focus {\r
 165       color: $anchor-font-color-hover;\r
 166       @if $anchor-text-decoration-hover != $anchor-text-decoration {\r
 167         text-decoration: $anchor-text-decoration-hover;\r
 168       }\r
 169     }\r
 170 \r
 171     img { border:none; }\r
 172   }\r
 173 \r
 174   /* Default paragraph styles */\r
 175   p {\r
 176     font-family: $paragraph-font-family;\r
 177     font-weight: $paragraph-font-weight;\r
 178     font-size: $paragraph-font-size;\r
 179     line-height: $paragraph-line-height;\r
 180     margin-bottom: $paragraph-margin-bottom;\r
 181     text-rendering: $paragraph-text-rendering;\r
 182 \r
 183     &.lead { @include lead; }\r
 184 \r
 185     & aside {\r
 186       font-size: $paragraph-aside-font-size;\r
 187       line-height: $paragraph-aside-line-height;\r
 188       font-style: $paragraph-aside-font-style;\r
 189     }\r
 190   }\r
 191 \r
 192   /* Default header styles */\r
 193   h1, h2, h3, h4, h5, h6 {\r
 194     font-family: $header-font-family;\r
 195     font-weight: $header-font-weight;\r
 196     font-style: $header-font-style;\r
 197     color: $header-font-color;\r
 198     text-rendering: $header-text-rendering;\r
 199     margin-top: $header-top-margin;\r
 200     margin-bottom: $header-bottom-margin;\r
 201     line-height: $header-line-height;\r
 202 \r
 203     small {\r
 204       font-size: $small-font-size;\r
 205       color: $small-font-color;\r
 206       line-height: 0;\r
 207     }\r
 208   }\r
 209 \r
 210   h1 { font-size: $h1-font-size - $h1-font-reduction; }\r
 211   h2 { font-size: $h2-font-size - $h2-font-reduction; }\r
 212   h3 { font-size: $h3-font-size - $h3-font-reduction; }\r
 213   h4 { font-size: $h4-font-size - $h4-font-reduction; }\r
 214   h5 { font-size: $h5-font-size - $h5-font-reduction; }\r
 215   h6 { font-size: $h6-font-size - $h6-font-reduction; }\r
 216 \r
 217   .subheader { @include subheader; }\r
 218 \r
 219   hr {\r
 220     border: $hr-border-style $hr-border-color;\r
 221     border-width: $hr-border-width 0 0;\r
 222     clear: both;\r
 223     margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));\r
 224     height: 0;\r
 225   }\r
 226 \r
 227   /* Helpful Typography Defaults */\r
 228   em,\r
 229   i {\r
 230     font-style: italic;\r
 231     line-height: inherit;\r
 232   }\r
 233 \r
 234   strong,\r
 235   b {\r
 236     font-weight: $font-weight-bold;\r
 237     line-height: inherit;\r
 238   }\r
 239 \r
 240   small {\r
 241     font-size: $small-font-size;\r
 242     color: $small-font-color;\r
 243     line-height: inherit;\r
 244   }\r
 245 \r
 246   code {\r
 247     font-family: $code-font-family;\r
 248     font-weight: $code-font-weight;\r
 249     color: $code-color;\r
 250     background-color: $code-background-color;\r
 251     border-width: $code-border-size;\r
 252     border-style: $code-border-style;\r
 253     border-color: $code-border-color;\r
 254     padding: $code-padding;\r
 255   }\r
 256 \r
 257   /* Lists */\r
 258   ul,\r
 259   ol,\r
 260   dl {\r
 261     font-size: $list-font-size;\r
 262     line-height: $list-line-height;\r
 263     margin-bottom: $list-margin-bottom;\r
 264     list-style-position: $list-style-position;\r
 265     font-family: $list-font-family;\r
 266   }\r
 267 \r
 268   /* Lists */\r
 269   ul, ol {\r
 270     margin-left: $list-side-margin;\r
 271     li {\r
 272       ul,\r
 273       ol {\r
 274         margin-left: $list-nested-margin;\r
 275         margin-bottom: 0;\r
 276       }\r
 277     }\r
 278   }\r
 279 \r
 280   /* Lists without bullets */\r
 281   ul.no-bullet {\r
 282     &, li ul, li ol {\r
 283       list-style-type: none;\r
 284     }\r
 285     margin-left: $list-side-margin-no-bullet;\r
 286   }\r
 287 \r
 288   /* Definition Lists */\r
 289   dl {\r
 290     dt {\r
 291       margin-bottom: $definition-list-header-margin-bottom;\r
 292       font-weight: $definition-list-header-weight;\r
 293     }\r
 294     dd { margin-bottom: $definition-list-margin-bottom; }\r
 295   }\r
 296 \r
 297   /* Abbreviations */\r
 298   abbr,\r
 299   acronym {\r
 300     text-transform: uppercase;\r
 301     font-size: 90%;\r
 302     color: $body-font-color;\r
 303     border-bottom: $acronym-underline;\r
 304     cursor: help;\r
 305   }\r
 306   abbr {\r
 307     text-transform: none;\r
 308   }\r
 309 \r
 310   /* Blockquotes */\r
 311   blockquote {\r
 312     margin: 0 0 $paragraph-margin-bottom;\r
 313     padding: $blockquote-padding;\r
 314     border-left: $blockquote-border;\r
 315 \r
 316     cite {\r
 317       display: block;\r
 318       font-size: $blockquote-cite-font-size;\r
 319       color: $blockquote-cite-font-color;\r
 320       &:before {\r
 321         content: "\2014 \0020";\r
 322       }\r
 323 \r
 324       a,\r
 325       a:visited {\r
 326         color: $blockquote-cite-link-color;\r
 327       }\r
 328     }\r
 329   }\r
 330   blockquote,\r
 331   blockquote p {\r
 332     line-height: $paragraph-line-height;\r
 333     color: $blockquote-font-color;\r
 334   }\r
 335 \r
 336   @include breakpoint(medium) {\r
 337     h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }\r
 338     h1 { font-size: $h1-font-size; }\r
 339     h2 { font-size: $h2-font-size; }\r
 340     h3 { font-size: $h3-font-size; }\r
 341     h4 { font-size: $h4-font-size; }\r
 342     h5 { font-size: $h5-font-size; }\r
 343     h6 { font-size: $h6-font-size; }\r
 344   }\r
 345 }\r