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

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/scss/layout/_documentation.scss
View file

@ -26,8 +26,8 @@
@media (min-width: map-get($breakpoints, "sm")) {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: $round;
border-top-left-radius: $round;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
}
~ article {
@ -48,8 +48,7 @@
}
&.picked {
// Source: https://feathericons.com/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
@ -59,15 +58,14 @@
&[data-color="yellow"],
&[data-color="amber"] {
&.picked {
// Source: https://feathericons.com/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
// TODO
}
}
}
}
h4 {
transition: color $transition;
transition: color var(--transition);
}
pre[data-theme="generated"] {
@ -84,7 +82,7 @@
button {
display: block;
width: 100%;
margin-bottom: $spacing-typography/2;
margin-bottom: calc(var(--spacing-typography) / 2);
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
@ -102,13 +100,13 @@
}
.grid > * {
padding: ($spacing-gutter/2) 0;
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
text-align: center;
}
details {
margin-top: $spacing-typography*2;
margin-top: calc(var(--spacing-typography) * 2);
}
}