_editor.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. .wp-block-a8c-blog-posts {
  2. &.image-aligntop {
  3. .post-thumbnail {
  4. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  5. }
  6. }
  7. &.image-alignleft {
  8. .post-thumbnail {
  9. margin-right: var(--global--spacing-vertical);
  10. }
  11. }
  12. &.image-alignright {
  13. .post-thumbnail {
  14. margin-left: var(--global--spacing-vertical);
  15. }
  16. }
  17. &.image-alignbehind .post-has-image {
  18. .entry-wrapper {
  19. padding: var(--global--spacing-vertical);
  20. }
  21. .cat-links {
  22. color: var(--global--color-white);
  23. }
  24. a:hover {
  25. color: currentColor;
  26. }
  27. }
  28. .article-section-title {
  29. font-size: var(--global--font-size-base);
  30. margin-top: 0;
  31. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  32. }
  33. article {
  34. margin-bottom: calc(3 * var(--global--spacing-vertical));
  35. }
  36. .post-thumbnail {
  37. img {
  38. vertical-align: middle;
  39. width: auto;
  40. }
  41. }
  42. .entry-wrapper > * {
  43. /* Vertical margins logic between post details */
  44. margin-top: var(--global--spacing-unit);
  45. margin-bottom: var(--global--spacing-unit);
  46. &:first-child {
  47. margin-top: 0;
  48. }
  49. &:last-child {
  50. margin-bottom: 0;
  51. }
  52. }
  53. .entry-title {
  54. a {
  55. color: var(--global--color-primary);
  56. .has-background:not(.has-background-background-color) &,
  57. [class*="background-color"]:not(.has-background-background-color) &,
  58. [style*="background-color"] & {
  59. color: currentColor;
  60. }
  61. &:hover {
  62. color: var(--global--color-primary-hover);
  63. text-decoration: underline;
  64. }
  65. .has-background:not(.has-background-background-color) &,
  66. [class*="background-color"]:not(.has-background-background-color) &,
  67. [style*="background-color"] & {
  68. color: currentColor;
  69. }
  70. }
  71. }
  72. .more-link {
  73. display: block;
  74. color: inherit;
  75. margin-top: var(--global--spacing-unit);
  76. &:after {
  77. content: "\02192";
  78. display: inline-block;
  79. margin-left: 0.5em;
  80. }
  81. &:hover,
  82. &:active {
  83. color: var(--global--color-primary-hover);
  84. text-decoration: none;
  85. .has-background:not(.has-background-background-color) &,
  86. [class*="background-color"]:not(.has-background-background-color) &,
  87. [style*="background-color"] & {
  88. color: currentColor;
  89. }
  90. }
  91. }
  92. .entry-meta,
  93. .cat-links {
  94. color: var(--global--color-foreground-light);
  95. font-size: var(--global--font-size-sm);
  96. .has-background:not(.has-background-background-color) &,
  97. [class*="background-color"]:not(.has-background-background-color) &,
  98. [style*="background-color"] & {
  99. color: currentColor;
  100. }
  101. .byline:not(:last-child) {
  102. margin-right: var(--global--spacing-unit);
  103. }
  104. .published + .updated {
  105. display: none;
  106. }
  107. a {
  108. color: currentColor;
  109. text-decoration: underline;
  110. &:hover,
  111. &:active {
  112. color: var(--global--color-primary-hover);
  113. text-decoration: none;
  114. .has-background:not(.has-background-background-color) &,
  115. [class*="background-color"]:not(.has-background-background-color) &,
  116. [style*="background-color"] & {
  117. color: currentColor;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. // Add theme style to load-more button
  124. @import "../../base/extends";
  125. .wp-block-a8c-blog-posts + .button {
  126. // Extend button style
  127. @extend %button-style;
  128. display: inline-block;
  129. font-size: var(--global--font-size-md);
  130. &:hover {
  131. cursor: default;
  132. }
  133. .has-background:not(.has-background-background-color) &,
  134. [class*="background-color"]:not(.has-background-background-color) &,
  135. [style*="background-color"] & {
  136. background-color: transparent;
  137. border: var(--button--border-width, 2px) solid currentColor;
  138. color: currentColor;
  139. }
  140. }