diff --git a/.changeset/wet-llamas-join.md b/.changeset/wet-llamas-join.md new file mode 100644 index 00000000000..0f43d578734 --- /dev/null +++ b/.changeset/wet-llamas-join.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/math-input": minor +"@khanacademy/perseus": minor +--- + +Break Perseus styling into its own Cascade Layers diff --git a/.storybook/main.ts b/.storybook/main.ts index 7de702cffb2..914826e208e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -14,8 +14,12 @@ const cssWrapper = { if (pathname.endsWith(".css")) { // Exclude the CSS files that are not part of the shared layer. if (!excludedCssFiles.some((file) => pathname.endsWith(file))) { - // Exclude any CSS file that already has a layer statement. - if (!code.includes("@layer")) { + // Exclude any CSS file that already has a layer statement, + // unless it is specifying a sub-layer. + if ( + !code.includes("@layer") || + /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code) + ) { const layerStatements = "@layer reset, shared, legacy;\n@layer shared"; return { diff --git a/packages/math-input/styles/main.css b/packages/math-input/styles/main.css index 1e56aae6690..acd2341ca30 100644 --- a/packages/math-input/styles/main.css +++ b/packages/math-input/styles/main.css @@ -1,4 +1,7 @@ -@import "mathquill/build/mathquill.css"; +@layer libraries, perseus-legacy; + +@import "mathquill/build/mathquill.css" layer(libraries); + .keypad-input { outline: none !important; } diff --git a/packages/perseus/src/styles/paragraph-styles.css b/packages/perseus/src/styles/paragraph-styles.css new file mode 100644 index 00000000000..76ef50c4cab --- /dev/null +++ b/packages/perseus/src/styles/paragraph-styles.css @@ -0,0 +1,526 @@ +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph { + color: #21242c; + font-size: 20px; + line-height: 30px; + margin: 0 auto; + max-width: 688px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .paragraph { + color: #21242c; + font-size: 20px; + line-height: 30px; + margin-bottom: 32px; + margin-top: 0; +} +/* Reset the Renderer margins for the image widget. + The image widget title and caption shouldn't have margins, + so we need to override the above styles. */ +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-widget + .perseus-renderer + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + mjx-container { + font-size: 100%; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + color: #21242c; + font-size: 20px; + line-height: 30px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + .paragraph, +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + ol, +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + ul { + color: rgba(33, 36, 44, 0.64); + font-size: 14px; + line-height: 19px; + text-align: left; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .paragraph.perseus-paragraph-full-width { + margin-bottom: 32px; + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip { + padding: 8px 12px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph + ul:not([data-widget="radio"]) { + font-size: 15px; + line-height: 1.5; + margin: 0; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; +} +.framework-perseus.perseus-mobile + .perseus-article + .perseus-renderer + > .paragraph { + margin-left: auto; + margin-right: auto; + max-width: 700px; +} +.framework-perseus.perseus-mobile + .perseus-article + .paragraph.perseus-paragraph-full-width { + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .perseus-article + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-mobile :not(blockquote) > div.paragraph { + margin: 0; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + margin: 0 auto; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph:not(:first-child) { + margin-top: var(--wb-sizing-size_240); + margin-bottom: var(--wb-sizing-size_240); +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph { + margin: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"], .indicatorContainer) { + margin: 0 0 0 1em; + padding: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"], .indicatorContainer) + > li { + padding-left: 10px; + margin-bottom: 24px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + margin: 0; + padding-left: 32px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li { + list-style-type: decimal; + margin-bottom: 24px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol, +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) + ol, +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ol + ul:not([data-widget="radio"]), +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) + ul:not([data-widget="radio"]) { + padding-top: 24px; +} +@media (max-width: 767px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: none; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 14px; + line-height: 1.3; + text-align: left; + } +} +@media (min-width: 767px) and (max-width: 1199px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: 512px; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 17px; + line-height: 1.4; + text-align: left; + } +} +@media (min-width: 1200px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: 688px; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 20px; + line-height: 1.4; + text-align: left; + } +} +.framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width { + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip { + padding: 8px 12px; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph + ul:not([data-widget="radio"]) { + font-size: 15px; + line-height: 1.5; + margin: 0; +} diff --git a/packages/perseus/src/styles/perseus-renderer-part-1.css b/packages/perseus/src/styles/perseus-renderer-part-1.css index d15ecbaa295..a50104cb426 100644 --- a/packages/perseus/src/styles/perseus-renderer-part-1.css +++ b/packages/perseus/src/styles/perseus-renderer-part-1.css @@ -20,7 +20,7 @@ top: 0; left: 0; } -var, +.graphie var, div.graphie { white-space: pre; /** diff --git a/packages/perseus/src/styles/perseus-renderer-part-2.css b/packages/perseus/src/styles/perseus-renderer-part-2.css index cb3f85d2d9c..c6750e7e81d 100644 --- a/packages/perseus/src/styles/perseus-renderer-part-2.css +++ b/packages/perseus/src/styles/perseus-renderer-part-2.css @@ -175,6 +175,3 @@ font-size: 18px; } } -.perseus-widget-editor-content .perseus-editor-accordion h2 { - padding-top: 0; -} diff --git a/packages/perseus/src/styles/perseus-renderer.css b/packages/perseus/src/styles/perseus-renderer.css index c2d3445b99d..0e0c0548d29 100644 --- a/packages/perseus/src/styles/perseus-renderer.css +++ b/packages/perseus/src/styles/perseus-renderer.css @@ -1,27 +1,30 @@ -@import "./util.css"; -@import "./styles.css"; -@import "./perseus-renderer-part-1.css"; -@import "widgets/categorizer.css"; -@import "widgets/dropdown.css"; -@import "widgets/expression.css"; -@import "widgets/free-response.css"; -@import "widgets/grapher.css"; -@import "widgets/graded-group.css"; -@import "widgets/group.css"; -@import "widgets/image.css"; -@import "widgets/interactive-graph.css"; -@import "widgets/label-image.css"; -@import "widgets/matcher.css"; -@import "widgets/matrix.css"; -@import "widgets/measurer.css"; -@import "widgets/numeric.css"; -@import "widgets/orderer.css"; -@import "widgets/plotter.css"; -@import "widgets/radio.css"; -@import "widgets/sortable.css"; -@import "widgets/table.css"; -@import "widget-container.css"; -@import "./perseus-renderer-part-2.css"; +@layer libraries, perseus-legacy; + +@import "./util.css" layer(perseus-legacy); +@import "./styles.css"; /* These styles are needed in the shared layer to override element selectors that are provided in the shared layer by frontend apps */ +@import "./paragraph-styles.css" layer(perseus-legacy); +@import "./perseus-renderer-part-1.css" layer(perseus-legacy); +@import "widgets/categorizer.css" layer(perseus-legacy); +@import "widgets/dropdown.css" layer(perseus-legacy); +@import "widgets/expression.css" layer(perseus-legacy); +@import "widgets/free-response.css" layer(perseus-legacy); +@import "widgets/grapher.css" layer(perseus-legacy); +@import "widgets/graded-group.css" layer(perseus-legacy); +@import "widgets/group.css" layer(perseus-legacy); +@import "widgets/image.css" layer(perseus-legacy); +@import "widgets/interactive-graph.css" layer(perseus-legacy); +@import "widgets/label-image.css" layer(perseus-legacy); +@import "widgets/matcher.css" layer(perseus-legacy); +@import "widgets/matrix.css" layer(perseus-legacy); +@import "widgets/measurer.css" layer(perseus-legacy); +@import "widgets/numeric.css" layer(perseus-legacy); +@import "widgets/orderer.css" layer(perseus-legacy); +@import "widgets/plotter.css" layer(perseus-legacy); +@import "widgets/radio.css" layer(perseus-legacy); +@import "widgets/sortable.css" layer(perseus-legacy); +@import "widgets/table.css" layer(perseus-legacy); +@import "widget-container.css" layer(perseus-legacy); +@import "./perseus-renderer-part-2.css" layer(perseus-legacy); /* This file replicates the definition order of our styling when it was in LESS format. The styling in the original perseus-renderer.less had import statements interspersed among style definitions diff --git a/packages/perseus/src/styles/styles.css b/packages/perseus/src/styles/styles.css index e2d2fcfa722..d8f643c7789 100644 --- a/packages/perseus/src/styles/styles.css +++ b/packages/perseus/src/styles/styles.css @@ -10,48 +10,6 @@ white-space: pre; overflow: auto; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph { - color: #21242c; - font-size: 20px; - line-height: 30px; - margin: 0 auto; - max-width: 688px; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .paragraph { - color: #21242c; - font-size: 20px; - line-height: 30px; - margin-bottom: 32px; - margin-top: 0; -} -/* Reset the Renderer margins for the image widget. - The image widget title and caption shouldn't have margins, - so we need to override the above styles. */ -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-widget - .perseus-renderer - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - mjx-container { - font-size: 100%; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - color: #21242c; - font-size: 20px; - line-height: 30px; -} .framework-perseus.perseus-article:not(.perseus-mobile) table { color: #21242c; font-size: 20px; @@ -90,39 +48,6 @@ .framework-perseus.perseus-article:not(.perseus-mobile) .MathJax .math { color: inherit; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - .paragraph, -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - ol, -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - ul { - color: rgba(33, 36, 44, 0.64); - font-size: 14px; - line-height: 19px; - text-align: left; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .paragraph.perseus-paragraph-full-width { - margin-bottom: 32px; - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} .framework-perseus.perseus-article:not(.perseus-mobile) .unresponsive-svg-image, .framework-perseus.perseus-article:not(.perseus-mobile) .svg-image { font-size: 14px; @@ -180,167 +105,17 @@ h6:first-child { margin-top: 0; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip { - padding: 8px 12px; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph - ul:not([data-widget="radio"]) { - font-size: 15px; - line-height: 1.5; - margin: 0; -} .framework-perseus.perseus-article:not(.perseus-mobile) pre { margin: 0 -16px 32px -16px; } -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; -} -.framework-perseus.perseus-mobile - .perseus-article - .perseus-renderer - > .paragraph { - margin-left: auto; - margin-right: auto; - max-width: 700px; -} -.framework-perseus.perseus-mobile - .perseus-article - .paragraph.perseus-paragraph-full-width { - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-mobile - .perseus-article - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} -.framework-perseus.perseus-mobile :not(blockquote) > div.paragraph { - margin: 0; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - margin: 0 auto; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph:not(:first-child) { - margin-top: var(--wb-sizing-size_240); - margin-bottom: var(--wb-sizing-size_240); -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph { - margin: 0; -} .framework-perseus.perseus-mobile .clearfix > .perseus-renderer { margin-bottom: 32px; } -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"], .indicatorContainer) { - margin: 0 0 0 1em; - padding: 0; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"], .indicatorContainer) - > li { - padding-left: 10px; - margin-bottom: 24px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - margin: 0; - padding-left: 32px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li { - list-style-type: decimal; - margin-bottom: 24px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol, -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) - ol, -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ol - ul:not([data-widget="radio"]), -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) - ul:not([data-widget="radio"]) { - padding-top: 24px; -} .framework-perseus.perseus-mobile .perseus-block-math { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } @media (max-width: 767px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: none; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -372,36 +147,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 18px; @@ -415,61 +160,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 14px; - line-height: 1.3; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 21px; line-height: 1.2; @@ -502,9 +192,6 @@ } } @media (min-width: 767px) and (max-width: 1199px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: 512px; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -536,36 +223,6 @@ line-height: 1.5; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 20px; @@ -579,61 +236,6 @@ line-height: 1.5; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 17px; - line-height: 1.4; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 23px; line-height: 1.3; @@ -666,9 +268,6 @@ } } @media (min-width: 1200px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: 688px; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -700,36 +299,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 22px; @@ -743,61 +312,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 20px; - line-height: 1.4; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 25px; line-height: 1.2; @@ -839,42 +353,11 @@ padding-top: 16px; padding-bottom: 16px; } -.framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width { - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-mobile - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} .framework-perseus.perseus-mobile .unresponsive-svg-image, .framework-perseus.perseus-mobile .svg-image { font-size: 14px; line-height: 19.6px; } -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip { - padding: 8px 12px; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph - ul:not([data-widget="radio"]) { - font-size: 15px; - line-height: 1.5; - margin: 0; +.perseus-widget-editor-content .perseus-editor-accordion h2 { + padding-top: 0; } diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index 686d1ef5ca5..0c706627e90 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -52,6 +52,13 @@ color: var(--wb-semanticColor-core-foreground-instructive-default); } +.choice :global(.paragraph) { + font-size: inherit; + font-weight: inherit; + line-height: inherit; + color: inherit; +} + @media (prefers-reduced-motion: no-preference) { .choice { transition: all 0.125s;