content.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /*
  2. Styling for content pages
  3. Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
  4. */
  5. // TODO: consolidate cms.scss and content.scss
  6. .content-page {
  7. &.content {
  8. padding-top: $header-height; // remove extra padding added by .content. Keep .content selector to increase specificity
  9. }
  10. word-break: break-word;
  11. /*
  12. Links and Buttons
  13. */
  14. // TODO: remove an use link style in more generic selector,
  15. // which is likely .website-redesign to start
  16. // a {
  17. // color: @link-color-alt;
  18. // &:hover {
  19. // color: @link-hover-color-alt;
  20. // }
  21. // }
  22. hr {
  23. border-color: var(--neutral-30);
  24. }
  25. /*
  26. section
  27. */
  28. section {
  29. padding: var(--spacing-16) var(--spacing-05) 0 var(--spacing-05);
  30. // TODO: confirm if we will still support this and if so what colors to use
  31. // &.color-block {
  32. // &.green-dark {
  33. // background-color: @ol-dark-green;
  34. // }
  35. // &.green {
  36. // background-color: @ol-green;
  37. // .no-card * {
  38. // .btn-primary,
  39. // .btn-success {
  40. // // only correct button colors when green on green
  41. // .btn-primary-on-primary-bg;
  42. // }
  43. // }
  44. // }
  45. // &.blue-gray-dark {
  46. // background-color: @ol-blue-gray-5;
  47. // }
  48. // &.blue-gray-light {
  49. // background-color: @ol-blue-gray-1;
  50. // }
  51. // &.green,
  52. // &.green-dark,
  53. // &.blue-gray-dark {
  54. // .no-card * {
  55. // &:not(.btn) {
  56. // color: @white;
  57. // }
  58. // a {
  59. // text-decoration: underline;
  60. // }
  61. // .btn {
  62. // text-decoration: none;
  63. // }
  64. // .form-control {
  65. // color: @input-color;
  66. // }
  67. // }
  68. // }
  69. // }
  70. .section-row {
  71. @extend .container;
  72. }
  73. }
  74. .content-container > section:first-child {
  75. padding-top: var(--spacing-15);
  76. }
  77. section.no-top-padding {
  78. /* opt out of padding via the CMS */
  79. padding-top: 0;
  80. }
  81. // TODO: only used on about page. Confirm with UX changes needed
  82. // .container-small {
  83. // section .section-row {
  84. // /* match col-sm-8 */
  85. // /* @grid-gutter-width is used for margins */
  86. // max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
  87. // @media (min-width: @screen-md-min) {
  88. // max-width: (@screen-md * (8/12)) - @grid-gutter-width;
  89. // }
  90. // @media (min-width: @screen-lg-min) {
  91. // max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
  92. // }
  93. // }
  94. // }
  95. /*
  96. lists
  97. */
  98. .list-without-style {
  99. list-style: none;
  100. margin: 0;
  101. padding: 0;
  102. }
  103. }