[Summary view] [Print] [Text view]

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