style-child-theme-editor.scss 5.2 KB

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