[Summary view] [Print] [Text view]

   1  .wp-block-group {
   2  
   3      // Start IE clearfix.
   4      // This hack is only necessary because we want to support IE11.
   5      // If we don't want to support IE11, then "display: flow-root" would suffice.
   6  
   7      display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
   8  
   9      // End IE clearfix.
  10  
  11      .wp-block-group__inner-container {
  12          margin-left: auto;
  13          margin-right: auto;
  14  
  15          > * {
  16              margin-top: calc(0.666 * var(--global--spacing-vertical));
  17              margin-bottom: calc(0.666 * var(--global--spacing-vertical));
  18  
  19              &.alignfull {
  20                  @extend %responsive-alignfull-width-mobile;
  21              }
  22  
  23              @include media(mobile) {
  24                  margin-top: var(--global--spacing-vertical);
  25                  margin-bottom: var(--global--spacing-vertical);
  26              }
  27  
  28              &:first-child {
  29                  margin-top: 0;
  30              }
  31  
  32              &:last-child {
  33                  margin-bottom: 0;
  34              }
  35          }
  36      }
  37  
  38      &.has-background {
  39          padding: calc(0.666 * var(--global--spacing-vertical));
  40  
  41          @include media(mobile) {
  42              padding: var(--global--spacing-vertical);
  43          }
  44      }
  45  
  46      // Block Styles
  47      &.is-style-twentytwentyone-border {
  48          border: calc(3 * var(--separator--height)) solid var(--global--color-border);
  49          padding: var(--global--spacing-vertical);
  50      }
  51  
  52      // Adjust alignfull items to account for left and right padding.
  53      &.has-background,
  54      &.is-style-twentytwentyone-border {
  55  
  56          .wp-block-group__inner-container > .alignfull,
  57          .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
  58              max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
  59              width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
  60              margin-left: calc(-1 * var(--global--spacing-vertical));
  61          }
  62      }
  63  }