No Description

_type.scss 6.0KB

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