mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
61 lines
1.2 KiB
SCSS
61 lines
1.2 KiB
SCSS
/**
|
|
* Docs: Code
|
|
*/
|
|
|
|
code {
|
|
--font-weight: 400;
|
|
}
|
|
|
|
// Custom spacings for <pre> (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-color: var( --card-sectionning-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: .375rem .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: 1rem 0;
|
|
}
|
|
}
|
|
|
|
// 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';
|
|
}
|
|
}
|