mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
85 lines
1.8 KiB
SCSS
85 lines
1.8 KiB
SCSS
/**
|
|
* Docs: Code
|
|
*/
|
|
|
|
// Custom spacings for <pre> (vertically aligned with <article> content)
|
|
pre {
|
|
|
|
@if map-get($breakpoints, "sm") and
|
|
$enable-responsive-spacings {
|
|
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "md") and
|
|
$enable-responsive-spacings {
|
|
|
|
@media (min-width: map-get($breakpoints, "md")) {
|
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "lg") and
|
|
$enable-responsive-spacings {
|
|
|
|
@media (min-width: map-get($breakpoints, "lg")) {
|
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "xl") and
|
|
$enable-responsive-spacings {
|
|
|
|
@media (min-width: map-get($breakpoints, "xl")) {
|
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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-gutter);
|
|
right: var(--spacing-gutter);
|
|
}
|
|
}
|
|
|
|
// Spacing for Valid & Invalid badge
|
|
code {
|
|
padding: 1rem 0;
|
|
}
|
|
}
|
|
|
|
// Color for Valid & Invalid code
|
|
[data-theme="invalid"] {
|
|
&:before {
|
|
background: var(--invalid);
|
|
content: 'Not so great';
|
|
}
|
|
}
|
|
|
|
[data-theme="valid"] {
|
|
&:before {
|
|
background: var(--valid);
|
|
content: 'Great';
|
|
}
|
|
}
|