[Summary view] [Print] [Text view]

   1  .wp-block-quote {
   2      position: relative;
   3      border-left: none;
   4      margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
   5      padding-left: 1em;
   6  
   7      p {
   8          font-family: var(--quote--font-family);
   9          font-size: var(--quote--font-size);
  10          font-style: var(--quote--font-style);
  11          font-weight: var(--quote--font-weight);
  12          line-height: var(--quote--line-height);
  13      }
  14  
  15      strong {
  16          font-weight: var(--quote--font-weight-strong);
  17      }
  18  
  19      &:before {
  20          content: "\201C";
  21          font-size: var(--quote--font-size);
  22          line-height: var(--quote--line-height);
  23          left: 8px;
  24      }
  25  
  26      .wp-block-quote__citation {
  27          color: currentColor;
  28          font-size: var(--global--font-size-xs);
  29          font-style: var(--quote--font-style-cite);
  30  
  31          .has-background &,
  32          [class*="background-color"] &,
  33          [style*="background-color"] &,
  34          .wp-block-cover[style*="background-image"] & {
  35              color: currentColor;
  36          }
  37      }
  38  
  39      &.has-text-align-right {
  40          margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
  41          padding-right: 0;
  42          border-right: none;
  43  
  44          // Hide the left aligned quote.
  45          &:before {
  46              display: none;
  47          }
  48  
  49          // Align the quote left of the text.
  50          p:before {
  51              content: "\201D";
  52              font-size: var(--quote--font-size);
  53              font-weight: normal;
  54              line-height: var(--quote--line-height);
  55              margin-right: 5px;
  56          }
  57      }
  58  
  59      &.has-text-align-center {
  60          margin: var(--global--spacing-vertical) auto;
  61  
  62          &:before {
  63              display: none;
  64          }
  65      }
  66  
  67      &.is-large,
  68      &.is-style-large {
  69          padding-left: 0;
  70  
  71          /* Resetting margins to match _block-container.scss */
  72          margin-top: var(--global--spacing-vertical);
  73          margin-bottom: var(--global--spacing-vertical);
  74  
  75          p {
  76              font-size: var(--quote--font-size-large);
  77              font-style: var(--quote--font-style-large);
  78              line-height: var(--quote--line-height-large);
  79          }
  80  
  81          &:before {
  82              font-size: var(--quote--font-size-large);
  83              line-height: var(--quote--line-height-large);
  84              left: calc(-1 * var(--global--spacing-horizontal));
  85          }
  86  
  87          &.has-text-align-right {
  88  
  89              // Hide the left aligned quote.
  90              &:before {
  91                  display: none;
  92              }
  93  
  94              // Align the quote left of the text.
  95              p:before {
  96                  content: "\201D";
  97                  font-size: var(--quote--font-size-large);
  98                  font-weight: normal;
  99                  line-height: var(--quote--line-height-large);
 100                  margin-right: 10px;
 101              }
 102          }
 103  
 104          @include media(mobile-only) {
 105              padding-left: var(--global--spacing-horizontal);
 106  
 107              &:before {
 108                  left: 0;
 109              }
 110  
 111              &.has-text-align-right {
 112                  padding-left: 0;
 113                  padding-right: var(--global--spacing-horizontal);
 114  
 115                  &:before {
 116                      right: 0;
 117                  }
 118              }
 119          }
 120      }
 121  
 122      @include media(mobile-only) {
 123          padding-left: calc(0.5 * var(--global--spacing-horizontal));
 124  
 125          &:before {
 126              left: 0;
 127          }
 128  
 129          &.has-text-align-right {
 130              padding-left: 0;
 131              padding-right: calc(0.5 * var(--global--spacing-horizontal));
 132  
 133              &:before {
 134                  right: 0;
 135              }
 136          }
 137  
 138          &.has-text-align-center {
 139              padding-left: 0;
 140              padding-right: 0;
 141          }
 142      }
 143  
 144      @include media(mobile) {
 145          margin-left: auto;
 146  
 147          &.has-text-align-right {
 148              margin-right: auto;
 149          }
 150      }
 151  }