_style.scss 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .wp-block-cover,
  2. .wp-block-cover-image {
  3. background-color: var(--cover--color-foreground);
  4. min-height: var(--cover--height);
  5. margin-top: inherit;
  6. margin-bottom: inherit;
  7. .wp-block-cover__inner-container,
  8. .wp-block-cover-image-text,
  9. .wp-block-cover-text {
  10. color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
  11. margin-top: var(--global--spacing-vertical);
  12. margin-bottom: var(--global--spacing-vertical);
  13. .has-link-color a {
  14. color: var( --wp--style--color--link, var(--global--color-primary) );
  15. }
  16. }
  17. /* default & custom background-color */
  18. &:not([class*='background-color']){
  19. .wp-block-cover__inner-container,
  20. .wp-block-cover-image-text,
  21. .wp-block-cover-text {
  22. color: var(--cover--color-background);
  23. }
  24. }
  25. /* Treating H2 separately to account for legacy /core styles */
  26. h2 {
  27. font-size: var(--heading--font-size-h2);
  28. letter-spacing: var(--heading--letter-spacing-h2);
  29. line-height: var(--heading--line-height);
  30. max-width: inherit; // undo opinionated styles
  31. text-align: inherit; // undo opinionated styles
  32. padding: 0;
  33. &.has-text-align-left {
  34. text-align: left;
  35. }
  36. &.has-text-align-center {
  37. text-align: center;
  38. }
  39. &.has-text-align-right {
  40. text-align: right;
  41. }
  42. }
  43. .wp-block-cover__inner-container {
  44. width: calc(100% - calc( 2 * var(--global--spacing-vertical)));
  45. & > * {
  46. margin-top: calc( 0.666 * var(--global--spacing-vertical) );
  47. margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
  48. @include media(mobile) {
  49. margin-top: var(--global--spacing-vertical);
  50. margin-bottom: var(--global--spacing-vertical);
  51. }
  52. &:first-child {
  53. margin-top: 0;
  54. }
  55. &:last-child {
  56. margin-bottom: 0;
  57. }
  58. }
  59. }
  60. &.alignleft,
  61. &.alignright {
  62. margin-top: 0;
  63. > * {
  64. margin-top: calc(2 * var(--global--spacing-vertical));
  65. margin-bottom: calc(2 * var(--global--spacing-vertical));
  66. padding-left: var(--global--spacing-horizontal);
  67. padding-right: var(--global--spacing-horizontal);
  68. width: 100%;
  69. }
  70. }
  71. &.has-left-content,
  72. &.has-right-content {
  73. justify-content: center;
  74. }
  75. }