diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css index 74678cace..8b4319cc8 100644 --- a/docs/assets/styles/code-examples.css +++ b/docs/assets/styles/code-examples.css @@ -32,19 +32,9 @@ .code-example-source pre { position: relative; - background-color: var(--wa-color-neutral-fill-subtle); border-radius: 0; - padding: 0; margin: 0; white-space: normal; - - code { - display: block; - background-color: transparent; - padding: var(--wa-space-m); - white-space: pre; - overflow-x: auto; - } } .code-example-source:not(:has(+ .code-example-buttons)) { diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md index 5a69eb274..3004c7a48 100644 --- a/docs/docs/experimental/style-guide.md +++ b/docs/docs/experimental/style-guide.md @@ -20,6 +20,11 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. ## Inline Text +```html + +Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. +``` +
Bold
Italics
diff --git a/src/themes/applied.css b/src/themes/applied.css index 1ba42f7fd..5fa9fd771 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -209,6 +209,21 @@ pre { white-space: pre; } +pre:has(code) { + position: relative; + padding: 0; + white-space: normal; + + code { + display: block; + font-size: 1em; + background-color: transparent; + padding: var(--wa-space-m); + white-space: pre; + overflow-x: auto; + } +} + kbd { border: solid 1px var(--wa-color-neutral-border-subtle); box-shadow: