less/bootstrap/type.less

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