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