tmpl/less/type.less

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