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

99
docs/css/pico.docs.css
View file

@ -4,6 +4,11 @@
/**
* Theme: Additions for docs
*/
:root {
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7);
@ -33,33 +38,33 @@ html {
* Docs: Main (Grid)
*/
body > main {
padding-top: 4.5rem;
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
}
@media (min-width: 576px) {
body > main {
padding-top: 4.75rem;
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
}
}
@media (min-width: 768px) {
body > main {
padding-top: 5rem;
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
}
}
@media (min-width: 992px) {
body > main {
grid-column-gap: 4rem;
grid-column-gap: calc(var(--spacing-gutter) * 4);
display: grid;
grid-template-columns: 200px auto;
padding-top: 5.25rem;
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
}
}
@media (min-width: 1200px) {
body > main {
padding-top: 5.5rem;
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
}
}
@ -69,36 +74,36 @@ body > main > * {
div[role="document"] > section::before {
display: block;
height: 4.5rem;
margin-top: -4.5rem;
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
content: '';
}
@media (min-width: 576px) {
div[role="document"] > section::before {
height: 4.75rem;
margin-top: -4.75rem;
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
height: 5rem;
margin-top: -5rem;
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
height: 5.25rem;
margin-top: -5.25rem;
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
height: 5.5rem;
margin-top: -5.5rem;
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
}
}
@ -106,7 +111,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
display: inline-block;
width: 1rem;
height: 1rem;
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='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
@ -123,11 +128,11 @@ form.grid > button {
*/
main > aside nav {
width: 100%;
margin-bottom: 2rem;
margin-bottom: var(--spacing-block);
}
main > aside nav h1 {
margin-bottom: 1.5rem;
margin-bottom: var(--spacing-typography);
}
@media (min-width: 992px) {
@ -207,8 +212,8 @@ main > aside details[open] summary {
#customization figure {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
}
}
@ -231,19 +236,15 @@ main > aside details[open] summary {
}
#customization figure button.picked {
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;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
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");
}
#customization h4 {
transition: color 0.2s ease-in-out;
transition: color var(--transition);
}
#customization pre[data-theme="generated"] {
@ -253,7 +254,7 @@ main > aside details[open] summary {
#grids button {
display: block;
width: 100%;
margin-bottom: 0.75rem;
margin-bottom: calc(var(--spacing-typography) / 2);
}
@media (min-width: 576px) {
@ -273,13 +274,13 @@ main > aside details[open] summary {
}
#grids .grid > * {
padding: 0.5rem 0;
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
text-align: center;
}
#grids details {
margin-top: 3rem;
margin-top: calc(var(--spacing-typography) * 2);
}
#forms div.grid {
@ -290,12 +291,12 @@ main > aside details[open] summary {
* Docs: Typography
*/
section > hgroup {
margin-bottom: 3rem;
margin-bottom: calc(var(--spacing-typography) * 2);
}
a[role=button] {
margin-right: 0.25rem;
margin-bottom: 1.5rem;
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
}
[role=document] section > h1,
@ -309,25 +310,25 @@ a[role=button] {
*/
@media (min-width: 576px) {
pre {
padding: 2rem 2.5rem;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@media (min-width: 768px) {
pre {
padding: 2rem 3rem;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@media (min-width: 992px) {
pre {
padding: 2rem 3.5rem;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@media (min-width: 1200px) {
pre {
padding: 2rem 4rem;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
@ -353,8 +354,8 @@ a[role=button] {
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
top: 1rem;
right: 1rem;
top: var(--spacing-gutter);
right: var(--spacing-gutter);
}
}
@ -399,7 +400,7 @@ body > nav a svg {
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
margin-left: -1rem;
margin-left: calc(var(--spacing-gutter) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
@ -407,7 +408,7 @@ body > nav ul:first-of-type li:first-of-type a {
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: 1rem;
margin-left: var(--spacing-gutter);
color: var(--h1);
}
@ -422,15 +423,15 @@ body > nav ul:first-of-type li:nth-of-type(2) {
*/
.switcher {
position: fixed;
right: 0.5rem;
bottom: 1rem;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
line-height: 1;
text-align: right;
box-shadow: var(--card-shadow);
}
.switcher::after {
@ -442,7 +443,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
transition: transform 0.2s ease-in-out;
transition: transform var(--transition);
}
.switcher i {
@ -457,7 +458,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover, .switcher:focus {
max-width: 100%;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.switcher:hover::after {
@ -466,8 +467,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover i {
max-width: 100%;
padding: 0 0.5rem 0 0.25rem;
transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
@ -476,6 +477,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
@media (min-width: 576px) {
.switcher {
right: 1rem;
right: var(--spacing-gutter);
}
}

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
docs/index.html
View file

@ -133,11 +133,11 @@
<h2>Themes</h2>
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
</hgroup>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button>
</article>
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p>
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
<article data-theme="light">
<h4>Light theme</h4>
<form class="grid">
@ -301,7 +301,7 @@
</tbody>
</table>
</figure>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
<p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section><!-- ./ Docs: Container -->
@ -327,7 +327,7 @@
&lt;/<b>div</b>&gt;</code></pre>
</article>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
<details>
<summary>
@ -353,7 +353,7 @@
<h2>Horizontal scroller</h2>
<h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
</hgroup>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
<figure>
<table>
<thead>
@ -938,7 +938,7 @@
<!-- Love -->
<section id="love">
<h2>We love <code>.classes</code></h2>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>
<div data-theme="valid">

4
docs/scss/components/_nav.scss
View file

@ -28,7 +28,7 @@ body > nav {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: -$spacing-gutter;
margin-left: calc(var(--spacing-gutter) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
@ -38,7 +38,7 @@ body > nav {
// Title
&:nth-of-type(2) {
display: none;
margin-left: $spacing-gutter;
margin-left: var(--spacing-gutter);
color: var(--h1);
@media (min-width: map-get($breakpoints, "lg")) {

24
docs/scss/components/_theme-switcher.scss
View file

@ -4,15 +4,15 @@
.switcher {
position: fixed;
right: $spacing-gutter/2;
bottom: $spacing-gutter;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
line-height: 1;
text-align: right;
box-shadow: var(--card-shadow);
&::after {
display: inline-block;
@ -23,7 +23,7 @@
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
transition: transform $transition;
transition: transform var(--transition);
}
i {
@ -40,10 +40,10 @@
&:focus {
max-width: 100%;
transition:
background-color $transition,
border-color $transition,
color $transition,
box-shadow $transition;
background-color var(--transition),
border-color var(--transition),
color var(--transition),
box-shadow var(--transition);
}
&:hover {
@ -53,9 +53,9 @@
i {
max-width: 100%;
padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
transition: max-width $transition,
padding $transition;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
transition: max-width var(--transition),
padding var(--transition);
}
}
@ -65,6 +65,6 @@
}
@media (min-width: map-get($breakpoints, "sm")) {
right: $spacing-gutter;
right: var(--spacing-gutter);
}
}

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

@ -6,38 +6,34 @@
pre {
@if map-get($breakpoints, "sm") and
map-get($spacing-factor, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
@ -61,8 +57,8 @@ pre {
line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) {
top: $spacing-gutter;
right: $spacing-gutter;
top: var(--spacing-gutter);
right: var(--spacing-gutter);
}
}

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

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

4
docs/scss/layout/_aside.scss
View file

@ -6,10 +6,10 @@ main > aside {
nav {
width: 100%;
margin-bottom: $spacing-block;
margin-bottom: var(--spacing-block);
h1 {
margin-bottom: $spacing-typography;
margin-bottom: var(--spacing-typography);
}
@media (min-width: map-get($breakpoints, "lg")) {

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);
}
}

35
docs/scss/layout/_main.scss
View file

@ -5,25 +5,25 @@
$navHeight: 3.5rem;
body > main {
padding-top:map-get($spacing-factor, "xs") + $navHeight;
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
@media (min-width: map-get($breakpoints, "sm")) {
padding-top: map-get($spacing-factor, "sm") + $navHeight;
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "md")) {
padding-top: map-get($spacing-factor, "md") + $navHeight;
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "lg")) {
grid-column-gap: $spacing-gutter*4;
grid-column-gap: calc(var(--spacing-gutter) * 4);
display: grid;
grid-template-columns: 200px auto;
padding-top: map-get($spacing-factor, "lg") + $navHeight;
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: map-get($spacing-factor, "xl") + $navHeight;
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
}
> * {
@ -37,29 +37,29 @@ body > main {
div[role="document"] > section::before {
display: block;
height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
content: '';
@media (min-width: map-get($breakpoints, "sm")) {
height: map-get($spacing-factor, "sm") + $navHeight;
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
}
@media (min-width: map-get($breakpoints, "md")) {
height: map-get($spacing-factor, "md") + $navHeight;
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
}
@media (min-width: map-get($breakpoints, "lg")) {
height: map-get($spacing-factor, "lg") + $navHeight;
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
height: map-get($spacing-factor, "xl") + $navHeight;
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
}
}
@ -71,8 +71,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
display: inline-block;
width: 1rem;
height: 1rem;
// 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='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;

1
docs/scss/themes/_docs.scss → docs/scss/themes/docs.scss
View file

@ -3,5 +3,6 @@
*/
@import "../../../scss/themes/default/colors";
@import "docs/icons";
@import "docs/light";
@import "docs/dark";

7
docs/scss/themes/docs/_icons.scss Normal file
View file

@ -0,0 +1,7 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: 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='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: 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");
}