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

CSS Vars refactoring

Browse source
This commit is contained in:
Lucas Larroche 2021-07-02 16:54:41 +07:00
parent 14460576bf
commit d12af72cab
64 changed files with 4878 additions and 4948 deletions
Download patch file Download diff file Expand all files Collapse all files

50
docs/scss/content/_code.scss
View file

@ -2,40 +2,16 @@
* Docs: Code
*/
// Custom spacings for <pre> (vertically aligned with <article> content)
pre {
code {
--font-weight: 400;
}
@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));
}
}
// 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
@ -57,8 +33,8 @@ pre {
line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -71,14 +47,14 @@ pre {
// Color for Valid & Invalid code
[data-theme="invalid"] {
&:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
}
[data-theme="valid"] {
&:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
}

6
docs/scss/content/_typography.scss
View file

@ -3,12 +3,12 @@
*/
section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2);
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {