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

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