mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style the samp element like code

Browse source 
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
1 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
scss/content/_code.scss
View file

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