_content.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. // stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
  2. //
  3. // Automatically style Markdown-based tables like a Bootstrap `.table`.
  4. //
  5. .bd-content {
  6. order: 1;
  7. // Hack the sticky header
  8. > h2[id],
  9. > h3[id],
  10. > h4[id] {
  11. pointer-events: none;
  12. > div,
  13. > a {
  14. pointer-events: auto;
  15. }
  16. &::before {
  17. display: block;
  18. height: 6rem;
  19. margin-top: -6rem;
  20. visibility: hidden;
  21. content: "";
  22. }
  23. }
  24. > table {
  25. width: 100%;
  26. max-width: 100%;
  27. margin-bottom: 1rem;
  28. @include media-breakpoint-down(md) {
  29. display: block;
  30. overflow-x: auto;
  31. -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
  32. &.table-bordered {
  33. border: 0;
  34. }
  35. }
  36. // Cells
  37. > thead,
  38. > tbody,
  39. > tfoot {
  40. > tr {
  41. > th,
  42. > td {
  43. padding: $table-cell-padding;
  44. vertical-align: top;
  45. border: 1px solid $table-border-color;
  46. > p:last-child {
  47. margin-bottom: 0;
  48. }
  49. }
  50. }
  51. }
  52. // Prevent breaking of code (e.g., Grunt tasks list)
  53. td:first-child > code {
  54. white-space: nowrap;
  55. }
  56. }
  57. }
  58. //
  59. // Docs sections
  60. //
  61. .bd-content {
  62. > h2:not(:first-child) {
  63. margin-top: 3rem;
  64. }
  65. > h3 {
  66. margin-top: 1.5rem;
  67. }
  68. > ul li,
  69. > ol li {
  70. margin-bottom: .25rem;
  71. }
  72. @include media-breakpoint-up(lg) {
  73. > ul,
  74. > ol,
  75. > p {
  76. max-width: 80%;
  77. }
  78. }
  79. }
  80. .bd-title {
  81. margin-top: 1rem;
  82. margin-bottom: .5rem;
  83. font-weight: 300;
  84. @include media-breakpoint-up(sm) {
  85. font-size: 3rem;
  86. }
  87. }
  88. .bd-lead {
  89. font-size: 1.125rem;
  90. font-weight: 300;
  91. @include media-breakpoint-up(sm) {
  92. max-width: 80%;
  93. margin-bottom: 1rem;
  94. font-size: 1.5rem;
  95. }
  96. }
  97. .bd-text-purple { color: $bd-purple; }
  98. .bd-text-purple-bright { color: $bd-purple-bright; }