type.less 4.7 KB

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