css/bootstrap/type.less

   1 //
   2 // Typography
   3 // --------------------------------------------------
   4
   5
   6 // Body text
   7 // -------------------------
   8
   9 p {
  10   margin: 0 0 @baseLineHeight / 2;
  11 }
  12 .lead {
  13   margin-bottom: @baseLineHeight;
  14   font-size: @baseFontSize * 1.5;
  15   font-weight: 200;
  16   line-height: @baseLineHeight * 1.5;
  17 }
  18
  19
  20 // Emphasis & misc
  21 // -------------------------
  22
  23 small {
  24   font-size: 85%; // Ex: 14px base font * 85% = about 12px
  25 }
  26 strong {
  27   font-weight: bold;
  28 }
  29 em {
  30   font-style: italic;
  31 }
  32 cite {
  33   font-style: normal;
  34 }
  35
  36 // Utility classes
  37 .muted {
  38   color: @grayLight;
  39 }
  40 .text-warning {
  41   color: @warningText;
  42 }
  43 .text-error {
  44   color: @errorText;
  45 }
  46 .text-info {
  47   color: @infoText;
  48 }
  49 .text-success {
  50   color: @successText;
  51 }
  52
  53
  54 // Headings
  55 // -------------------------
  56
  57 h1, h2, h3, h4, h5, h6 {
  58   margin: (@baseLineHeight / 2) 0;
  59   font-family: @headingsFontFamily;
  60   font-weight: @headingsFontWeight;
  61   line-height: 1;
  62   color: @headingsColor;
  63   text-rendering: optimizelegibility; // Fix the character spacing for headings
  64   small {
  65     font-weight: normal;
  66     line-height: 1;
  67     color: @grayLight;
  68   }
  69 }
  70 h1 { font-size: 36px; line-height: 40px; }
  71 h2 { font-size: 30px; line-height: 40px; }
  72 h3 { font-size: 24px; line-height: 40px; }
  73 h4 { font-size: 18px; line-height: 20px; }
  74 h5 { font-size: 14px; line-height: 20px; }
  75 h6 { font-size: 12px; line-height: 20px; }
  76
  77 h1 small { font-size: 24px; }
  78 h2 small { font-size: 18px; }
  79 h3 small { font-size: 14px; }
  80 h4 small { font-size: 14px; }
  81
  82
  83 // Page header
  84 // -------------------------
  85
  86 .page-header {
  87   padding-bottom: (@baseLineHeight / 2) - 1;
  88   margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
  89   border-bottom: 1px solid @grayLighter;
  90 }
  91
  92
  93
  94 // Lists
  95 // --------------------------------------------------
  96
  97 // Unordered and Ordered lists
  98 ul, ol {
  99   padding: 0;
 100   margin: 0 0 @baseLineHeight / 2 25px;
 101 }
 102 ul ul,
 103 ul ol,
 104 ol ol,
 105 ol ul {
 106   margin-bottom: 0;
 107 }
 108 li {
 109   line-height: @baseLineHeight;
 110 }
 111 ul.unstyled,
 112 ol.unstyled {
 113   margin-left: 0;
 114   list-style: none;
 115 }
 116
 117 // Description Lists
 118 dl {
 119   margin-bottom: @baseLineHeight;
 120 }
 121 dt,
 122 dd {
 123   line-height: @baseLineHeight;
 124 }
 125 dt {
 126   font-weight: bold;
 127 }
 128 dd {
 129   margin-left: @baseLineHeight / 2;
 130 }
 131 // Horizontal layout (like forms)
 132 .dl-horizontal {
 133   .clearfix(); // Ensure dl clears floats if empty dd elements present
 134   dt {
 135     float: left;
 136     width: @horizontalComponentOffset - 20;
 137     clear: left;
 138     text-align: right;
 139     .text-overflow();
 140   }
 141   dd {
 142     margin-left: @horizontalComponentOffset;
 143   }
 144 }
 145
 146 // MISC
 147 // ----
 148
 149 // Horizontal rules
 150 hr {
 151   margin: @baseLineHeight 0;
 152   border: 0;
 153   border-top: 1px solid @hrBorder;
 154   border-bottom: 1px solid @white;
 155 }
 156
 157 // Abbreviations and acronyms
 158 abbr[title] {
 159   cursor: help;
 160   border-bottom: 1px dotted @grayLight;
 161 }
 162 abbr.initialism {
 163   font-size: 90%;
 164   text-transform: uppercase;
 165 }
 166
 167 // Blockquotes
 168 blockquote {
 169   padding: 0 0 0 15px;
 170   margin: 0 0 @baseLineHeight;
 171   border-left: 5px solid @grayLighter;
 172   p {
 173     margin-bottom: 0;
 174     #font > .shorthand(16px,300,@baseLineHeight * 1.25);
 175   }
 176   small {
 177     display: block;
 178     line-height: @baseLineHeight;
 179     color: @grayLight;
 180     &:before {
 181       content: '\2014 \00A0';
 182     }
 183   }
 184
 185   // Float right with text-align: right
 186   &.pull-right {
 187     float: right;
 188     padding-right: 15px;
 189     padding-left: 0;
 190     border-right: 5px solid @grayLighter;
 191     border-left: 0;
 192     p,
 193     small {
 194       text-align: right;
 195     }
 196     small {
 197       &:before {
 198         content: '';
 199       }
 200       &:after {
 201         content: '\00A0 \2014';
 202       }
 203     }
 204   }
 205 }
 206
 207 // Quotes
 208 q:before,
 209 q:after,
 210 blockquote:before,
 211 blockquote:after {
 212   content: "";
 213 }
 214
 215 // Addresses
 216 address {
 217   display: block;
 218   margin-bottom: @baseLineHeight;
 219   font-style: normal;
 220   line-height: @baseLineHeight;
 221 }