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