style-child-theme-editor.scss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. /**
  2. * These styles should be loaded by the Block Editor only
  3. */
  4. /**
  5. * Abstracts
  6. * - Mixins, variables and functions
  7. */
  8. @import "../../varia/sass/abstracts/imports";
  9. /**
  10. * Child Theme Name
  11. */
  12. @import "config-child-theme-deep";
  13. /**
  14. * Base
  15. * - Reset the browser
  16. */
  17. @import "../../varia/sass/base/editor";
  18. /**
  19. * Elements
  20. * - Styles for basic HTML elemants
  21. */
  22. @import "../../varia/sass/elements/editor";
  23. /**
  24. * Blocks
  25. * - These styles replace key Gutenberg Block styles for fonts, colors, and
  26. * spacing with CSS-variables overrides
  27. */
  28. @import "../../varia/sass/blocks/editor";
  29. /**
  30. * Vendors
  31. * - Styles for 3rd party plugins and WP extensions
  32. */
  33. @import "../../varia/sass/vendors/editor";
  34. /**
  35. * Extra Editor Styles
  36. *
  37. * 1. General Styles
  38. * 2. Block Specific Styles
  39. * 2.1. Column Block
  40. * 2.2. Quote Block
  41. * 2.3. File Block
  42. * 2.4. Pre Block and Verse Block
  43. * 2.5. Button Block
  44. * 2.6. Search Block
  45. */
  46. .editor-post-title__input {
  47. text-align: center;
  48. }
  49. /**
  50. * 1. General Styles
  51. */
  52. body {
  53. background-color: #{map-deep-get($config-global, "color", "white")};
  54. font-weight: 300;
  55. }
  56. a {
  57. text-decoration: none;
  58. }
  59. /**
  60. * 2. Block Specific Styles
  61. */
  62. /**
  63. * 2.1. Column Block
  64. */
  65. .wp-block-coblocks-column {
  66. h1,
  67. h2,
  68. h3,
  69. h4,
  70. h5,
  71. h6 {
  72. margin-bottom: .857em;
  73. }
  74. a {
  75. color: #{map-deep-get($config-global, "color", "secondary", "default")};
  76. &:hover {
  77. color: #{map-deep-get($config-global, "color", "secondary", "hover")};
  78. }
  79. }
  80. }
  81. /**
  82. * 2.2. Quote Block
  83. */
  84. .wp-block-quote,
  85. .wp-block-quote[style*="text-align:center"],
  86. .wp-block-quote[style*="text-align:right"] {
  87. border: 1px solid #f2f2f2;
  88. padding: #{map-deep-get($config-global, "spacing", "horizontal")};;
  89. p {
  90. @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
  91. }
  92. .wp-block-quote__citation {
  93. color: #{map-deep-get($config-global, "color", "secondary", "default")};
  94. }
  95. }
  96. /**
  97. * 2.3. File Block
  98. */
  99. .wp-block-file {
  100. div {
  101. &.wp-block-file__button {
  102. text-transform: uppercase;
  103. line-height: #{map-deep-get($config-button, "font", "line-height")};
  104. color: #{map-deep-get($config-button, "color", "text")};
  105. cursor: pointer;
  106. font-weight: #{map-deep-get($config-button, "font", "weight")};
  107. @include font-family( map-deep-get($config-button, "font", "family") );
  108. font-size: #{map-deep-get($config-button, "font", "size")};
  109. background-color: #{map-deep-get($config-button, "color", "background")};
  110. border-radius: #{map-deep-get($config-button, "border-radius")};
  111. border-width: #{map-deep-get($config-button, "border-width")};
  112. padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
  113. display: inline-block;
  114. &:focus,
  115. &:hover,
  116. &:visited {
  117. color: #{map-deep-get($config-button, "color", "text-hover")};
  118. background-color: #{map-deep-get($config-button, "color", "background-hover")};
  119. opacity: 1;
  120. }
  121. }
  122. }
  123. }
  124. /**
  125. * 2.4. Pre Block and Verse Block
  126. */
  127. .wp-block-preformatted,
  128. .wp-block-verse {
  129. pre {
  130. font-family: #{map-deep-get($config-global, "font", "family", "code")};
  131. }
  132. }
  133. /**
  134. * 2.5. Button Block
  135. */
  136. .wp-block-button {
  137. div {
  138. &.wp-block-button__link {
  139. text-transform: uppercase;
  140. }
  141. }
  142. }
  143. /**
  144. * 2.6. Search Block
  145. */
  146. .wp-block-search {
  147. .wp-block-search__button {
  148. text-transform: uppercase;
  149. line-height: #{map-deep-get($config-button, "font", "line-height")};
  150. color: #{map-deep-get($config-button, "color", "text")};
  151. cursor: pointer;
  152. font-weight: #{map-deep-get($config-button, "font", "weight")};
  153. @include font-family( map-deep-get($config-button, "font", "family") );
  154. font-size: #{map-deep-get($config-button, "font", "size")};
  155. background-color: #{map-deep-get($config-button, "color", "background")};
  156. border-radius: #{map-deep-get($config-button, "border-radius")};
  157. border-width: #{map-deep-get($config-button, "border-width")};
  158. padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
  159. display: inline-block;
  160. &:focus,
  161. &:hover,
  162. &:visited {
  163. color: #{map-deep-get($config-button, "color", "text-hover")};
  164. background-color: #{map-deep-get($config-button, "color", "background-hover")};
  165. opacity: 1;
  166. }
  167. border: none;
  168. box-shadow: none;
  169. }
  170. }
  171. .wp-block-a8c-blog-posts {
  172. .entry-title a {
  173. &:active,
  174. &:focus,
  175. &:hover {
  176. text-decoration: none;
  177. }
  178. }
  179. .cat-links a,
  180. .more-link,
  181. .entry-meta a {
  182. text-decoration: none;
  183. &:active,
  184. &:focus,
  185. &:hover {
  186. text-decoration: underline;
  187. }
  188. }
  189. &.image-alignbehind article {
  190. .entry-title a {
  191. &:active,
  192. &:focus,
  193. &:hover {
  194. text-decoration: underline;
  195. }
  196. }
  197. }
  198. }
  199. .has-background:not(.has-background-background-color),
  200. [class*="background-color"]:not(.has-background-background-color),
  201. [style*="background-color"] {
  202. .wp-block-a8c-blog-posts {
  203. .entry-title a{
  204. &:active,
  205. &:focus,
  206. &:hover {
  207. text-decoration: underline;
  208. }
  209. }
  210. }
  211. }
  212. .wp-block-a8c-blog-posts + .button {
  213. font-size: (strip-unit(map-deep-get($config-global, "font", "size", "xs")) + 0em);
  214. }
  215. /**
  216. * Full Site Editing
  217. * - Full Site Editing overrides
  218. */
  219. @import "full-site-editing-editor";