diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js index 76ddb4cc4..03ee04e56 100644 --- a/entry_types/scrolled/package/src/contentElements/quote/Quote.js +++ b/entry_types/scrolled/package/src/contentElements/quote/Quote.js @@ -18,9 +18,12 @@ export function Quote({configuration, contentElementId, sectionProps}) { const theme = useTheme(); const {t} = useI18n({locale: 'ui'}); + const design = configuration.variant ? configuration.variant.split('-')[0] : theme.options.quoteDesign; + return (
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css index fbb18627e..101c5d84b 100644 --- a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css +++ b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css @@ -10,6 +10,11 @@ color: var(--palette-color); } +.design-largeCentered { + text-align: center; + align-items: center; +} + .figure a { color: var(--palette-color, contentLinkColor); } @@ -21,7 +26,7 @@ width: 100%; box-sizing: border-box; margin: 0; - padding: 1em 0 0.5em 0; + padding: 1em 0 var(--theme-quote-text-padding-bottom, 0.5em) 0; } .design-largeHanging .text, @@ -75,12 +80,24 @@ right: calc(100% + var(--theme-quote-hanging-mark-spacing, 0.05em)); } +.design-largeCentered .text p:first-child::before, .design-largeHanging .text p:first-child::before { font-size: var(--quote-large-mark-font-size); line-height: 1em; +} + +.design-largeCentered .text p:first-child::before { + font-size: var(--quote-large-mark-font-size); + margin-top: var(--theme-quote-large-mark-margin-top, -0.1em); + margin-bottom: var(--theme-quote-large-mark-margin-bottom, -0.3em); + display: block; +} + +.design-largeHanging .text p:first-child::before { top: var(--theme-quote-large-mark-top, -0.2em); } +.design-largeCentered .text p:last-child::after, .design-largeHanging .text p:last-child::after { display: none; } @@ -104,6 +121,10 @@ margin-right: 0.5em; } +.design-largeCentered .attribution p:first-child::before { + display: none; +} + .attribution p { margin: 0; } diff --git a/entry_types/scrolled/package/src/contentElements/quote/editor.js b/entry_types/scrolled/package/src/contentElements/quote/editor.js index 9e34be160..591b8de5c 100644 --- a/entry_types/scrolled/package/src/contentElements/quote/editor.js +++ b/entry_types/scrolled/package/src/contentElements/quote/editor.js @@ -14,6 +14,7 @@ editor.contentElementTypes.register('quote', { configurationEditor({entry}) { this.tab('general', function() { + this.group('ContentElementVariant', {entry}); this.input('textSize', SelectInputView, { values: ['large', 'medium', 'small', 'verySmall'] }); diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js index 9fcf589a4..57f0d76f9 100644 --- a/entry_types/scrolled/package/src/contentElements/quote/stories.js +++ b/entry_types/scrolled/package/src/contentElements/quote/stories.js @@ -46,6 +46,19 @@ storiesOfContentElement(module, { textSize: 'verySmall' } }, + { + name: 'Large Centered', + configuration: { + variant: 'largeCentered-custom' + }, + themeOptions: { + properties: { + 'quote-largeCentered-custom': { + quoteLargeMarkFontSize: '3em' + } + } + } + }, { name: 'Hanging', themeOptions: {