mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
41314ab4b0
This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3.
70 lines
1.4 KiB
SCSS
70 lines
1.4 KiB
SCSS
/**
|
|
* Docs: Code
|
|
*/
|
|
|
|
// Code block inside article
|
|
article > footer.code {
|
|
background: var(--article-code-background-color);
|
|
}
|
|
article pre,
|
|
article pre code {
|
|
margin-bottom: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
// Code block outside article
|
|
// Horizontally aligned with <article> content
|
|
section > pre {
|
|
margin: var(--block-spacing-vertical) 0;
|
|
padding: calc(var(--block-spacing-vertical) / 1.5)
|
|
var(--block-spacing-horizontal);
|
|
background: var(--article-code-background-color);
|
|
box-shadow: var(--card-box-shadow);
|
|
}
|
|
|
|
// Badge for Valid & Invalid code
|
|
[data-theme="invalid"],
|
|
[data-theme="valid"] {
|
|
position: relative;
|
|
margin-bottom: 0 !important;
|
|
|
|
// Label
|
|
&:before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0;
|
|
color: var(--primary-inverse);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
|
|
@media (min-width: map-get($breakpoints, "lg")) {
|
|
top: var(--spacing);
|
|
right: var(--spacing);
|
|
}
|
|
}
|
|
|
|
// Spacing for Valid & Invalid badge
|
|
code {
|
|
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
|
|
var(--block-spacing-horizontal);
|
|
}
|
|
}
|
|
|
|
// Color for Valid & Invalid code
|
|
[data-theme="invalid"] {
|
|
&:before {
|
|
background: var(--invalid-color);
|
|
content: "Not so great";
|
|
}
|
|
}
|
|
|
|
[data-theme="valid"] {
|
|
&:before {
|
|
background: var(--valid-color);
|
|
content: "Great";
|
|
}
|
|
}
|