Style the samp element like code

Following Pico's philosophy of “give semantic HTML good styling”,
this element has semantics close to but slightly different from `<code>`,
and so I believe should be styled similarly.
This commit is contained in:
Eldred Habert 2024-12-14 10:50:38 +01:00 committed by GitHub
parent 6dc6489e69
commit 26e7cf9fb1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -21,7 +21,8 @@
font-family: var(#{$css-var-prefix}font-family); // 1
}
#{$parent-selector} pre code {
#{$parent-selector} pre code,
#{$parent-selector} pre samp {
font-size: inherit;
font-family: inherit;
}
@ -37,7 +38,8 @@
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color);
@ -46,7 +48,8 @@
}
#{$parent-selector} code,
#{$parent-selector} kbd {
#{$parent-selector} kbd,
#{$parent-selector} samp {
display: inline-block;
padding: 0.375rem;
}
@ -56,7 +59,8 @@
margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto;
> code {
> code,
> samp {
display: block;
padding: var(#{$css-var-prefix}spacing);
background: none;