[Summary view] [Print] [Text view]

   1  .wp-block-cover,
   2  .wp-block-cover-image {
   3  
   4      &:not(.alignwide):not(.alignfull) {
   5          clear: both;
   6      }
   7  
   8      &.alignfull {
   9          margin-top: 0;
  10          margin-bottom: 0;
  11      }
  12  
  13      background-color: var(--cover--color-background);
  14      min-height: var(--cover--height);
  15      margin-top: inherit;
  16      margin-bottom: inherit;
  17  
  18      .wp-block-cover__inner-container,
  19      .wp-block-cover-image-text,
  20      .wp-block-cover-text {
  21          color: currentColor; // Uses text color specified with background-color options in 07-utilities\color-palette.scss
  22          margin-top: var(--global--spacing-vertical);
  23          margin-bottom: var(--global--spacing-vertical);
  24  
  25          a:not(.wp-block-button__link):not(.wp-block-file__button) {
  26              color: currentColor;
  27          }
  28  
  29          .has-link-color a {
  30              color: var(--wp--style--color--link, var(--global--color-primary));
  31          }
  32      }
  33  
  34      /* default & custom background-color */
  35      &:not([class*="background-color"]) {
  36  
  37          .wp-block-cover__inner-container,
  38          .wp-block-cover-image-text,
  39          .wp-block-cover-text {
  40              color: var(--cover--color-foreground);
  41          }
  42      }
  43  
  44      /* Treating H2 separately to account for legacy /core styles */
  45      h2 {
  46          font-size: var(--heading--font-size-h2);
  47          letter-spacing: var(--heading--letter-spacing-h2);
  48          line-height: var(--heading--line-height-h2);
  49          max-width: inherit; // undo opinionated styles
  50          text-align: inherit; // undo opinionated styles
  51          padding: 0;
  52  
  53          &.has-text-align-left {
  54              text-align: left;
  55          }
  56  
  57          &.has-text-align-center {
  58              text-align: center;
  59          }
  60  
  61          &.has-text-align-right {
  62              text-align: right;
  63          }
  64      }
  65  
  66      .wp-block-cover__inner-container {
  67  
  68          width: calc(100% - calc(2 * var(--global--spacing-vertical)));
  69  
  70          > * {
  71              margin-top: calc(0.666 * var(--global--spacing-vertical));
  72              margin-bottom: calc(0.666 * var(--global--spacing-vertical));
  73  
  74              @include media(mobile) {
  75                  margin-top: var(--global--spacing-vertical);
  76                  margin-bottom: var(--global--spacing-vertical);
  77              }
  78  
  79              &:first-child {
  80                  margin-top: 0;
  81              }
  82  
  83              &:last-child {
  84                  margin-bottom: 0;
  85              }
  86          }
  87      }
  88  
  89      &.alignleft,
  90      &.alignright {
  91          margin-top: 0;
  92  
  93          > * {
  94              margin-top: calc(2 * var(--global--spacing-vertical));
  95              margin-bottom: calc(2 * var(--global--spacing-vertical));
  96              padding-left: var(--global--spacing-horizontal);
  97              padding-right: var(--global--spacing-horizontal);
  98              width: 100%;
  99          }
 100      }
 101  
 102      &.has-left-content,
 103      &.has-right-content {
 104          justify-content: center;
 105      }
 106  
 107      /* Block Styles */
 108      &.is-style-twentytwentyone-border {
 109          border: calc(3 * var(--separator--height)) solid var(--global--color-border);
 110      }
 111  
 112      /* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
 113      &[class*="-background-color"][class] .wp-block-cover__inner-container {
 114          background-color: unset;
 115      }
 116  }