_style.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. /* Block Alignments */
  2. /**
  3. * .alignleft
  4. */
  5. .alignleft {
  6. /*rtl:ignore*/
  7. text-align: left;
  8. /*rtl:ignore*/
  9. float: left;
  10. margin-top: 0;
  11. /*rtl:ignore*/
  12. margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
  13. margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
  14. }
  15. .entry-content > .alignleft {
  16. /*rtl:ignore*/
  17. float: left;
  18. @extend %responsive-alignleft;
  19. }
  20. /**
  21. * .aligncenter
  22. */
  23. .aligncenter {
  24. clear: both;
  25. display: block;
  26. float: none;
  27. margin-right: auto;
  28. margin-left: auto;
  29. text-align: center;
  30. }
  31. /**
  32. * .alignright
  33. */
  34. .alignright {
  35. /*rtl:ignore*/
  36. float: right;
  37. margin-top: 0;
  38. margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
  39. /*rtl:ignore*/
  40. margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
  41. }
  42. .entry-content > .alignright {
  43. /*rtl:ignore*/
  44. float: right;
  45. @extend %responsive-alignright;
  46. }
  47. // Make sure siblings of floated elements are top-aligned when nested
  48. .entry-content * > .alignleft + *,
  49. .entry-content * > .alignright + * {
  50. margin-top: 0;
  51. }
  52. /**
  53. * .aligndefault
  54. */
  55. .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
  56. .entry-content > *:not(.wp-block-button),
  57. .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
  58. @extend %responsive-aligndefault;
  59. }
  60. /**
  61. * .alignwide
  62. */
  63. .alignwide {
  64. clear: both;
  65. }
  66. .entry-content > .alignwide {
  67. @extend %responsive-alignwide;
  68. }
  69. .entry-content > .alignwide [class*="inner-container"] > .alignwide {
  70. @extend %responsive-alignwide-nested;
  71. }
  72. /**
  73. * .alignfull
  74. */
  75. .alignfull {
  76. clear: both;
  77. }
  78. .entry-content > .alignfull {
  79. @extend %responsive-alignfull;
  80. }
  81. .entry-content > .alignfull [class*="inner-container"] > .alignwide {
  82. @extend %responsive-alignwide-nested;
  83. }
  84. // Content alignment
  85. .has-left-content {
  86. justify-content: flex-start;
  87. }
  88. .has-right-content {
  89. justify-content: flex-end;
  90. }
  91. // Parallax
  92. .has-parallax {
  93. background-attachment: fixed;
  94. }
  95. // Gutenberg text color options
  96. .has-text-color {}
  97. .has-primary-color {
  98. color: #{map-deep-get($config-global, "color", "primary", "default")};
  99. }
  100. .has-secondary-color {
  101. color: #{map-deep-get($config-global, "color", "secondary", "default")};
  102. }
  103. .has-foreground-color {
  104. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  105. }
  106. .has-foreground-light-color {
  107. color: #{map-deep-get($config-global, "color", "foreground", "light")};
  108. }
  109. .has-foreground-dark-color {
  110. color: #{map-deep-get($config-global, "color", "foreground", "dark")};
  111. }
  112. .has-background-light-color {
  113. color: #{map-deep-get($config-global, "color", "background", "light")};
  114. }
  115. .has-background-dark-color {
  116. color: #{map-deep-get($config-global, "color", "background", "dark")};
  117. }
  118. .has-background-dim,
  119. .has-background-color {
  120. color: #{map-deep-get($config-global, "color", "background", "default")};
  121. }
  122. @if map-has-key(map-deep-get($config-global, "color"), "tertiary") {
  123. .has-tertiary-color {
  124. color: #{map-deep-get($config-global, "color", "tertiary", "default")};
  125. }
  126. }
  127. // Gutenberg background-color options
  128. .has-background {
  129. p:not(.has-text-color),
  130. h1:not(.has-text-color),
  131. h2:not(.has-text-color),
  132. h3:not(.has-text-color),
  133. h4:not(.has-text-color),
  134. h5:not(.has-text-color),
  135. h6:not(.has-text-color) {
  136. color: currentcolor;
  137. }
  138. }
  139. .has-primary-background-color,
  140. .has-primary-background-color.has-background-dim {
  141. background-color: #{map-deep-get($config-global, "color", "primary", "default")};
  142. }
  143. .has-primary-background-color:not(.has-text-color),
  144. .has-primary-background-color.has-background-dim:not(.has-text-color) {
  145. color: #{map-deep-get($config-global, "color", "background", "default")};
  146. }
  147. .has-secondary-background-color,
  148. .has-secondary-background-color.has-background-dim {
  149. background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
  150. }
  151. .has-secondary-background-color:not(.has-text-color),
  152. .has-secondary-background-color.has-background-dim:not(.has-text-color) {
  153. color: #{map-deep-get($config-global, "color", "background", "default")};
  154. }
  155. .has-background-dim,
  156. .has-foreground-background-color,
  157. .has-foreground-background-color.has-background-dim {
  158. background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
  159. }
  160. .has-background-dim,
  161. .has-foreground-background-color:not(.has-text-color),
  162. .has-foreground-background-color.has-background-dim:not(.has-text-color) {
  163. color: #{map-deep-get($config-global, "color", "background", "default")};
  164. }
  165. .has-foreground-light-background-color,
  166. .has-foreground-light-background-color.has-background-dim {
  167. background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
  168. }
  169. .has-foreground-light-background-color:not(.has-text-color),
  170. .has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
  171. color: #{map-deep-get($config-global, "color", "background", "default")};
  172. }
  173. .has-foreground-dark-background-color,
  174. .has-foreground-dark-background-color.has-background-dim {
  175. background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
  176. }
  177. .has-foreground-dark-background-color:not(.has-text-color),
  178. .has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
  179. color: #{map-deep-get($config-global, "color", "background", "default")};
  180. }
  181. .has-background-light-background-color,
  182. .has-background-light-background-color.has-background-dim {
  183. background-color: #{map-deep-get($config-global, "color", "background", "light")};
  184. }
  185. .has-background-light-background-color:not(.has-text-color),
  186. .has-background-light-background-color.has-background-dim:not(.has-text-color) {
  187. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  188. }
  189. .has-background-dark-background-color,
  190. .has-background-dark-background-color.has-background-dim {
  191. background-color: #{map-deep-get($config-global, "color", "background", "dark")};
  192. }
  193. .has-background-dark-background-color:not(.has-text-color),
  194. .has-background-dark-background-color.has-background-dim:not(.has-text-color) {
  195. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  196. }
  197. .has-background-background-color,
  198. .has-background-background-color.has-background-dim {
  199. background-color: #{map-deep-get($config-global, "color", "background", "default")};
  200. }
  201. .has-background-background-color:not(.has-text-color),
  202. .has-background-background-color.has-background-dim:not(.has-text-color) {
  203. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  204. }
  205. @if map-has-key(map-deep-get($config-global, "color"), "tertiary") {
  206. .has-tertiary-background-color,
  207. .has-tertiary-background-color.has-background-dim {
  208. background-color: #{map-deep-get($config-global, "color", "tertiary", "default")};
  209. }
  210. .has-tertiary-background-color:not(.has-text-color),
  211. .has-tertiary-background-color.has-background-dim:not(.has-text-color) {
  212. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  213. }
  214. }
  215. // Gutenberg Font-size options
  216. .is-small-text,
  217. .has-small-font-size {
  218. font-size: #{map-deep-get($config-global, "font", "size", "sm")};
  219. }
  220. .is-regular-text,
  221. .has-regular-font-size,
  222. .has-normal-font-size,
  223. .has-medium-font-size {
  224. font-size: #{map-deep-get($config-global, "font", "size", "base")};
  225. }
  226. .is-large-text,
  227. .has-large-font-size {
  228. font-size: #{map-deep-get($config-global, "font", "size", "lg")};
  229. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  230. }
  231. .is-larger-text,
  232. .has-larger-font-size,
  233. .has-huge-font-size {
  234. font-size: #{map-deep-get($config-global, "font", "size", "xl")};
  235. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  236. }
  237. // Drop caps
  238. .has-drop-cap:not(:focus)::first-letter {
  239. @include font-family( map-deep-get($config-heading, "font", "family") );
  240. font-size: calc(2 * #{map-deep-get($config-heading, "font", "size", "h1")});
  241. font-weight: #{map-deep-get($config-heading, "font", "weight")};
  242. line-height: 0.66;
  243. text-transform: uppercase;
  244. font-style: normal;
  245. float: left;
  246. margin: 0.1em 0.1em 0 0;
  247. }
  248. .has-drop-cap:not(:focus)::after {
  249. content: "";
  250. display: table;
  251. clear: both;
  252. padding-top: 14px;
  253. }
  254. .desktop-only {
  255. display: none;
  256. @include media(mobile) {
  257. display: block;
  258. }
  259. }
  260. /**
  261. * Spacing Overrides
  262. */
  263. @import "spacing-overrides";