content.sass 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. @import "../utilities/mixins"
  2. $content-heading-color: $text-strong !default
  3. $content-heading-weight: $weight-semibold !default
  4. $content-heading-line-height: 1.125 !default
  5. $content-blockquote-background-color: $background !default
  6. $content-blockquote-border-left: 5px solid $border !default
  7. $content-blockquote-padding: 1.25em 1.5em !default
  8. $content-pre-padding: 1.25em 1.5em !default
  9. $content-table-cell-border: 1px solid $border !default
  10. $content-table-cell-border-width: 0 0 1px !default
  11. $content-table-cell-padding: 0.5em 0.75em !default
  12. $content-table-cell-heading-color: $text-strong !default
  13. $content-table-head-cell-border-width: 0 0 2px !default
  14. $content-table-head-cell-color: $text-strong !default
  15. $content-table-foot-cell-border-width: 2px 0 0 !default
  16. $content-table-foot-cell-color: $text-strong !default
  17. .content
  18. @extend %block
  19. // Inline
  20. li + li
  21. margin-top: 0.25em
  22. // Block
  23. p,
  24. dl,
  25. ol,
  26. ul,
  27. blockquote,
  28. pre,
  29. table
  30. &:not(:last-child)
  31. margin-bottom: 1em
  32. h1,
  33. h2,
  34. h3,
  35. h4,
  36. h5,
  37. h6
  38. color: $content-heading-color
  39. font-weight: $content-heading-weight
  40. line-height: $content-heading-line-height
  41. h1
  42. font-size: 2em
  43. margin-bottom: 0.5em
  44. &:not(:first-child)
  45. margin-top: 1em
  46. h2
  47. font-size: 1.75em
  48. margin-bottom: 0.5714em
  49. &:not(:first-child)
  50. margin-top: 1.1428em
  51. h3
  52. font-size: 1.5em
  53. margin-bottom: 0.6666em
  54. &:not(:first-child)
  55. margin-top: 1.3333em
  56. h4
  57. font-size: 1.25em
  58. margin-bottom: 0.8em
  59. h5
  60. font-size: 1.125em
  61. margin-bottom: 0.8888em
  62. h6
  63. font-size: 1em
  64. margin-bottom: 1em
  65. blockquote
  66. background-color: $content-blockquote-background-color
  67. +ltr-property("border", $content-blockquote-border-left, false)
  68. padding: $content-blockquote-padding
  69. ol
  70. list-style-position: outside
  71. +ltr-property("margin", 2em, false)
  72. margin-top: 1em
  73. &:not([type])
  74. list-style-type: decimal
  75. &.is-lower-alpha
  76. list-style-type: lower-alpha
  77. &.is-lower-roman
  78. list-style-type: lower-roman
  79. &.is-upper-alpha
  80. list-style-type: upper-alpha
  81. &.is-upper-roman
  82. list-style-type: upper-roman
  83. ul
  84. list-style: disc outside
  85. +ltr-property("margin", 2em, false)
  86. margin-top: 1em
  87. ul
  88. list-style-type: circle
  89. margin-top: 0.5em
  90. ul
  91. list-style-type: square
  92. dd
  93. +ltr-property("margin", 2em, false)
  94. figure
  95. margin-left: 2em
  96. margin-right: 2em
  97. text-align: center
  98. &:not(:first-child)
  99. margin-top: 2em
  100. &:not(:last-child)
  101. margin-bottom: 2em
  102. img
  103. display: inline-block
  104. figcaption
  105. font-style: italic
  106. pre
  107. +overflow-touch
  108. overflow-x: auto
  109. padding: $content-pre-padding
  110. white-space: pre
  111. word-wrap: normal
  112. sup,
  113. sub
  114. font-size: 75%
  115. table
  116. width: 100%
  117. td,
  118. th
  119. border: $content-table-cell-border
  120. border-width: $content-table-cell-border-width
  121. padding: $content-table-cell-padding
  122. vertical-align: top
  123. th
  124. color: $content-table-cell-heading-color
  125. &:not([align])
  126. text-align: inherit
  127. thead
  128. td,
  129. th
  130. border-width: $content-table-head-cell-border-width
  131. color: $content-table-head-cell-color
  132. tfoot
  133. td,
  134. th
  135. border-width: $content-table-foot-cell-border-width
  136. color: $content-table-foot-cell-color
  137. tbody
  138. tr
  139. &:last-child
  140. td,
  141. th
  142. border-bottom-width: 0
  143. .tabs
  144. li + li
  145. margin-top: 0
  146. // Sizes
  147. &.is-small
  148. font-size: $size-small
  149. &.is-medium
  150. font-size: $size-medium
  151. &.is-large
  152. font-size: $size-large