quote.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. blockquote {
  2. p {
  3. display: inline;
  4. }
  5. }
  6. blockquote.quote-large-text-centered {
  7. text-align: center;
  8. font-size: var(--font-size-07);
  9. font-weight: 600;
  10. line-height: var(--line-height-06);
  11. // customize open/close quote placement.
  12. // Otherwise, close is after footer and before is above quote
  13. &::before,
  14. &::after {
  15. content: none;
  16. }
  17. .quote {
  18. margin-bottom: var(--spacing-08);
  19. &::before {
  20. content: open-quote;
  21. }
  22. &::after {
  23. content: close-quote;
  24. }
  25. }
  26. .quote-img {
  27. img {
  28. border-radius: 50%;
  29. height: 64px;
  30. max-width: 64px;
  31. }
  32. }
  33. footer {
  34. color: inherit;
  35. font-size: var(--font-size-03);
  36. font-weight: 400;
  37. line-height: var(--line-height-03);
  38. padding: var(--spacing-04) 0 0 0;
  39. &::before {
  40. content: none;
  41. }
  42. .quote-link {
  43. text-align: center;
  44. margin-top: var(--spacing-05);
  45. }
  46. }
  47. @include media-breakpoint-down(lg) {
  48. font-size: var(--font-size-04);
  49. line-height: var(--line-height-04);
  50. footer {
  51. font-size: var(--font-size-02);
  52. line-height: var(--line-height-02);
  53. }
  54. }
  55. }
  56. blockquote.quote-left-green-border {
  57. border-left: 2px solid var(--green-60);
  58. text-align: left;
  59. font-size: var(--font-size-07);
  60. font-weight: 600;
  61. line-height: var(--line-height-06);
  62. color: var(--neutral-90);
  63. padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06);
  64. // customize open/close quote placement.
  65. // Otherwise, close is after footer and before is above quote
  66. &::before,
  67. &::after {
  68. content: none;
  69. }
  70. .quote {
  71. &::before {
  72. content: open-quote;
  73. }
  74. &::after {
  75. content: close-quote;
  76. }
  77. }
  78. footer {
  79. @include heading-xs;
  80. color: var(--neutral-70);
  81. font-weight: 400;
  82. margin: var(--spacing-09) 0 0 0;
  83. padding: 0;
  84. &::before {
  85. content: '\2014 \00A0';
  86. }
  87. }
  88. .quote-link {
  89. margin-top: var(--spacing-05);
  90. }
  91. }