_alignment.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233
  1. .wp-block-group.alignfull,
  2. *[class*="wp-container-"] //Anything that inherits layout (container)
  3. {
  4. //give it some padding
  5. padding-left: var(--wp--custom--post-content--padding--left);
  6. padding-right: var(--wp--custom--post-content--padding--right);
  7. //Any nested containers, and anything that is alignfull
  8. *[class*="wp-container-"], // Any nested containers
  9. > .alignfull { // Any direct descendant that is alignfull
  10. // bust out of the container's padding
  11. margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
  12. margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
  13. width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important;
  14. }
  15. }
  16. @include break-mobile {
  17. // limit size of any element that is aligned left/right
  18. .wp-block[data-align="left"], // This is for the editor
  19. .wp-block[data-align="right"], // This is for the editor
  20. .wp-site-blocks .alignleft,
  21. .wp-site-blocks .alignright {
  22. max-width: var(--wp--custom--alignment--aligned-max-width);
  23. }
  24. }
  25. // This was added for the 'site-logo' block which centers with an 'align:center' attribute
  26. // instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
  27. // class which would do this for us. I'm not sure why but this centers things appropriately.
  28. .aligncenter {
  29. text-align: center;
  30. }