mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
85e21d35de
- Edit code colors and add a color for comments - Add ::selection - Small edits for cards: last-child and overflow - Add card-sectioning (header, footer, pre) - Change global hue for Primary color - Remove border for pre - Add querySelectorAll() for theme-switcher.js - Update docs
119 lines
2.1 KiB
SCSS
119 lines
2.1 KiB
SCSS
/**
|
||
* Code
|
||
*/
|
||
|
||
|
||
// Reboot
|
||
// ––––––––––––––––––––
|
||
|
||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
||
// 2. Correct the odd `em` font sizing in all browsers.
|
||
pre,
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-family: $monospace; // 1
|
||
font-size: 1rem; // 2
|
||
}
|
||
|
||
|
||
// Pico
|
||
// ––––––––––––––––––––
|
||
|
||
pre,
|
||
code,
|
||
kbd {
|
||
background: var(--code-inlined);
|
||
color: var(--code-color-1);
|
||
font-size: 85%;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
|
||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
font-size: 83%;
|
||
}
|
||
}
|
||
|
||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
font-size: 81%;
|
||
}
|
||
}
|
||
|
||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
font-size: 79%;
|
||
}
|
||
}
|
||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
font-size: 77%;
|
||
}
|
||
}
|
||
}
|
||
|
||
code,
|
||
kbd {
|
||
display: inline-block;
|
||
padding: .375rem .5rem;
|
||
border-radius: $round;
|
||
}
|
||
|
||
pre {
|
||
display: block;
|
||
margin-right: -$spacing-gutter;
|
||
margin-left: -$spacing-gutter;
|
||
padding: $spacing-block $spacing-gutter;
|
||
overflow-x: auto;
|
||
background: var(--code-background);
|
||
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
> code {
|
||
display: block;
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
line-height: $line-height;
|
||
}
|
||
}
|
||
|
||
// Code syntax
|
||
code {
|
||
|
||
// Tags
|
||
b {
|
||
color: var(--code-color-2);
|
||
font-weight: normal;
|
||
}
|
||
|
||
// Properties
|
||
i {
|
||
color: var(--code-color-3);
|
||
font-style: normal;
|
||
}
|
||
|
||
// Values
|
||
u {
|
||
color: var(--code-color-4);
|
||
text-decoration: none;
|
||
}
|
||
|
||
// Comments
|
||
em {
|
||
color: var(--code-color-5);
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// kbd
|
||
kbd {
|
||
background-color: var(--secondary);
|
||
color: var(--secondary-inverse);
|
||
font-weight: bolder;
|
||
}
|