content_page.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. /*
  2. Styling for content pages
  3. Including: about, home, blog, /for/__, legal, contact, portals, wiki
  4. */
  5. .content-page {
  6. word-break: break-word;
  7. /*
  8. Links and Buttons
  9. */
  10. a {
  11. color: @link-color-alt;
  12. &:hover {
  13. color: @link-hover-color-alt;
  14. }
  15. }
  16. // correct color property set on <a> above:
  17. .reset-btns;
  18. .alert {
  19. .alert;
  20. }
  21. .alert-info {
  22. .btn-info {
  23. .btn-alert-info;
  24. }
  25. }
  26. // correct color property set on <a> above:
  27. .reset-btns;
  28. .alert {
  29. .alert;
  30. }
  31. .alert-info {
  32. .btn-info {
  33. .btn-alert-info;
  34. }
  35. }
  36. hr {
  37. border-color: @hr-border-alt;
  38. }
  39. .quote-by {
  40. min-width: 80px;
  41. overflow: hidden;
  42. }
  43. .page-header {
  44. margin-top: 0px;
  45. }
  46. /*
  47. section
  48. */
  49. section {
  50. padding: @line-height-computed (@grid-gutter-width / 2);
  51. &.color-block {
  52. &.green-dark {
  53. background-color: @ol-dark-green;
  54. }
  55. &.green {
  56. background-color: @ol-green;
  57. .no-card * {
  58. .btn-primary,
  59. .btn-success {
  60. // only correct button colors when green on green
  61. .btn-primary-on-primary-bg;
  62. }
  63. }
  64. }
  65. &.blue-gray-dark {
  66. background-color: @ol-blue-gray-5;
  67. }
  68. &.blue-gray-light {
  69. background-color: @ol-blue-gray-1;
  70. }
  71. &.green,
  72. &.green-dark,
  73. &.blue-gray-dark {
  74. .no-card * {
  75. &:not(.btn) {
  76. color: @white;
  77. }
  78. a {
  79. text-decoration: underline;
  80. }
  81. .btn {
  82. text-decoration: none;
  83. }
  84. .form-control {
  85. color: @input-color;
  86. }
  87. }
  88. }
  89. }
  90. .section-row {
  91. margin: 0 auto;
  92. /* match .col-sm-10 */
  93. /* @grid-gutter-width is used for margins */
  94. max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
  95. @media (min-width: @screen-md-min) {
  96. max-width: (@screen-md * (10/12)) - @grid-gutter-width;
  97. }
  98. @media (min-width: @screen-lg-min) {
  99. max-width: (@screen-lg * (10/12)) - @grid-gutter-width;
  100. }
  101. }
  102. }
  103. .content-container > section:first-child {
  104. /* header */
  105. padding-bottom: 0;
  106. padding-top: 0;
  107. }
  108. .content-container > section:nth-child(2) {
  109. /* first content section */
  110. padding-top: 0;
  111. }
  112. section.no-top-padding {
  113. /* opt out of padding via the CMS */
  114. padding-top: 0;
  115. }
  116. .container-small {
  117. section .section-row {
  118. /* match col-sm-8 */
  119. /* @grid-gutter-width is used for margins */
  120. max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
  121. @media (min-width: @screen-md-min) {
  122. max-width: (@screen-md * (8/12)) - @grid-gutter-width;
  123. }
  124. @media (min-width: @screen-lg-min) {
  125. max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
  126. }
  127. }
  128. }
  129. /*
  130. lists
  131. */
  132. .list-without-style {
  133. list-style: none;
  134. margin: 0;
  135. padding: 0;
  136. }
  137. }