resources/scss/bootstrap/_type.scss

   1 //
   2 // Typography
   3 // --------------------------------------------------
   4
   5 // Headings
   6 // -------------------------
   7
   8 h1, h2, h3, h4, h5, h6,
   9 .h1, .h2, .h3, .h4, .h5, .h6 {
  10   font-family: $headings-font-family;
  11   font-weight: $headings-font-weight;
  12   line-height: $headings-line-height;
  13   color: $headings-color;
  14
  15   small,
  16   .small {
  17         font-weight: normal;
  18         line-height: 1;
  19         color: $headings-small-color;
  20   }
  21 }
  22
  23 h1, .h1,
  24 h2, .h2,
  25 h3, .h3 {
  26   margin-top: $line-height-computed;
  27   margin-bottom: ($line-height-computed / 2);
  28
  29   small,
  30   .small {
  31         font-size: 65%;
  32   }
  33 }
  34
  35 h4, .h4,
  36 h5, .h5,
  37 h6, .h6 {
  38   margin-top: ($line-height-computed / 2);
  39   margin-bottom: ($line-height-computed / 2);
  40
  41   small,
  42   .small {
  43         font-size: 75%;
  44   }
  45 }
  46
  47 h1, .h1 {
  48   font-size: $font-size-h1;
  49 }
  50
  51 h2, .h2 {
  52   font-size: $font-size-h2;
  53 }
  54
  55 h3, .h3 {
  56   font-size: $font-size-h3;
  57 }
  58
  59 h4, .h4 {
  60   font-size: $font-size-h4;
  61 }
  62
  63 h5, .h5 {
  64   font-size: $font-size-h5;
  65 }
  66
  67 h6, .h6 {
  68   font-size: $font-size-h6;
  69 }
  70
  71 // Body text
  72 // -------------------------
  73
  74 p {
  75   margin: 0 0 ($line-height-computed / 2);
  76 }
  77
  78 .lead {
  79   margin-bottom: $line-height-computed;
  80   font-size: floor(($font-size-base * 1.15));
  81   font-weight: 300;
  82   line-height: 1.4;
  83
  84   @media (min-width: $screen-sm-min) {
  85         font-size: ($font-size-base * 1.5);
  86   }
  87 }
  88
  89 // Emphasis & misc
  90 // -------------------------
  91
  92 // Ex: (12px small font / 14px base font) * 100% = about 85%
  93 small,
  94 .small {
  95   font-size: floor((100% * $font-size-small / $font-size-base));
  96 }
  97
  98 mark,
  99 .mark {
 100   background-color: $state-warning-bg;
 101   padding: .2em;
 102 }
 103
 104 // Alignment
 105 .text-left {
 106   text-align: left;
 107 }
 108
 109 .text-right {
 110   text-align: right;
 111 }
 112
 113 .text-center {
 114   text-align: center;
 115 }
 116
 117 .text-justify {
 118   text-align: justify;
 119 }
 120
 121 .text-nowrap {
 122   white-space: nowrap;
 123 }
 124
 125 // Transformation
 126 .text-lowercase {
 127   text-transform: lowercase;
 128 }
 129
 130 .text-uppercase {
 131   text-transform: uppercase;
 132 }
 133
 134 .text-capitalize {
 135   text-transform: capitalize;
 136 }
 137
 138 // Contextual colors
 139 .text-muted {
 140   color: $text-muted;
 141 }
 142
 143 @include text-emphasis-variant('.text-primary', $brand-primary);
 144
 145 @include text-emphasis-variant('.text-success', $state-success-text);
 146
 147 @include text-emphasis-variant('.text-info', $state-info-text);
 148
 149 @include text-emphasis-variant('.text-warning', $state-warning-text);
 150
 151 @include text-emphasis-variant('.text-danger', $state-danger-text);
 152
 153 // Contextual backgrounds
 154 // For now we'll leave these alongside the text classes until v4 when we can
 155 // safely shift things around (per SemVer rules).
 156 .bg-primary {
 157   // Given the contrast here, this is the only class to have its color inverted
 158   // automatically.
 159   color: #fff;
 160 }
 161
 162 @include bg-variant('.bg-primary', $brand-primary);
 163
 164 @include bg-variant('.bg-success', $state-success-bg);
 165
 166 @include bg-variant('.bg-info', $state-info-bg);
 167
 168 @include bg-variant('.bg-warning', $state-warning-bg);
 169
 170 @include bg-variant('.bg-danger', $state-danger-bg);
 171
 172 // Page header
 173 // -------------------------
 174
 175 .page-header {
 176   padding-bottom: (($line-height-computed / 2) - 1);
 177   margin: ($line-height-computed * 2) 0 $line-height-computed;
 178   border-bottom: 1px solid $page-header-border-color;
 179 }
 180
 181 // Lists
 182 // -------------------------
 183
 184 // Unordered and Ordered lists
 185 ul,
 186 ol {
 187   margin-top: 0;
 188   margin-bottom: ($line-height-computed / 2);
 189   ul,
 190   ol {
 191         margin-bottom: 0;
 192   }
 193 }
 194
 195 // List options
 196
 197 // [converter] extracted from `.list-unstyled` for libsass compatibility
 198 @mixin list-unstyled {
 199   padding-left: 0;
 200   list-style: none;
 201 }
 202
 203 // [converter] extracted as `@mixin list-unstyled` for libsass compatibility
 204 .list-unstyled {
 205   @include list-unstyled;
 206 }
 207
 208 // Inline turns list items into inline-block
 209 .list-inline {
 210   @include list-unstyled;
 211   margin-left: -5px;
 212
 213   > li {
 214         display: inline-block;
 215         padding-left: 5px;
 216         padding-right: 5px;
 217   }
 218 }
 219
 220 // Description Lists
 221 dl {
 222   margin-top: 0; // Remove browser default
 223   margin-bottom: $line-height-computed;
 224 }
 225
 226 dt,
 227 dd {
 228   line-height: $line-height-base;
 229 }
 230
 231 dt {
 232   font-weight: bold;
 233 }
 234
 235 dd {
 236   margin-left: 0; // Undo browser default
 237 }
 238
 239 // Horizontal description lists
 240 //
 241 // Defaults to being stacked without any of the below styles applied, until the
 242 // grid breakpoint is reached (default of ~768px).
 243
 244 .dl-horizontal {
 245   dd {
 246         @include clearfix; // Clear the floated `dt` if an empty `dd` is present
 247   }
 248
 249   @media (min-width: $grid-float-breakpoint) {
 250         dt {
 251           float: left;
 252           width: ($dl-horizontal-offset - 20);
 253           clear: left;
 254           text-align: right;
 255           @include text-overflow;
 256         }
 257         dd {
 258           margin-left: $dl-horizontal-offset;
 259         }
 260   }
 261 }
 262
 263 // Misc
 264 // -------------------------
 265
 266 // Abbreviations and acronyms
 267 abbr[title],
 268   // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 269 abbr[data-original-title] {
 270   cursor: help;
 271   border-bottom: 1px dotted $abbr-border-color;
 272 }
 273
 274 .initialism {
 275   font-size: 90%;
 276   @extend .text-uppercase;
 277 }
 278
 279 // Blockquotes
 280 blockquote {
 281   padding: ($line-height-computed / 2) $line-height-computed;
 282   margin: 0 0 $line-height-computed;
 283   font-size: $blockquote-font-size;
 284   border-left: 5px solid $blockquote-border-color;
 285
 286   p,
 287   ul,
 288   ol {
 289         &:last-child {
 290           margin-bottom: 0;
 291         }
 292   }
 293
 294   // Note: Deprecated small and .small as of v3.1.0
 295   // Context: https://github.com/twbs/bootstrap/issues/11660
 296   footer,
 297   small,
 298   .small {
 299         display: block;
 300         font-size: 80%; // back to default font-size
 301         line-height: $line-height-base;
 302         color: $blockquote-small-color;
 303
 304         &:before {
 305           content: '\2014 \00A0'; // em dash, nbsp
 306         }
 307   }
 308 }
 309
 310 // Opposite alignment of blockquote
 311 //
 312 // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
 313 .blockquote-reverse,
 314 blockquote.pull-right {
 315   padding-right: 15px;
 316   padding-left: 0;
 317   border-right: 5px solid $blockquote-border-color;
 318   border-left: 0;
 319   text-align: right;
 320
 321   // Account for citation
 322   footer,
 323   small,
 324   .small {
 325         &:before {
 326           content: '';
 327         }
 328         &:after {
 329           content: '\00A0 \2014'; // nbsp, em dash
 330         }
 331   }
 332 }
 333
 334 // Addresses
 335 address {
 336   margin-bottom: $line-height-computed;
 337   font-style: normal;
 338   line-height: $line-height-base;
 339 }