mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev' into dev

Browse source
This commit is contained in:
Lucas Larroche 2021-12-31 12:23:48 +07:00 • committed by GitHub
commit a7d549e574
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 108 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/pico.css
View file

@ -799,13 +799,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

1
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

9
css/pico.slim.css
View file

@ -728,13 +728,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;

1
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
docs/modal.html
View file

@ -27,7 +27,7 @@
&lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em> &lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u> &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal Launch demo modal
&lt;/<b>button</b>&gt; &lt;/<b>button</b>&gt;
@ -38,7 +38,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt; <i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u> <i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt; &lt;<b>p</b>&gt;
@ -51,13 +51,13 @@
<i>role</i>=<u>"button"</u>&gt; <i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u> <i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel Cancel
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u> &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u> <i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm Confirm
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt; &lt;/<b>footer</b>&gt;

8
docs/src/modal.html
View file

@ -98,7 +98,7 @@
<pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em> <pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u> &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal Launch demo modal
&lt;/<b>button</b>&gt; &lt;/<b>button</b>&gt;
@ -109,7 +109,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt; <i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u> <i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt; &lt;<b>p</b>&gt;
@ -122,13 +122,13 @@
<i>role</i>=<u>"button"</u>&gt; <i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u> <i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel Cancel
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u> &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u> <i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u> <i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt; <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm Confirm
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt; &lt;/<b>footer</b>&gt;

71
docs/src/typography.html
View file

@ -1,11 +1,9 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
${require('./_head.html') ${require('./_head.html') title="Typography" description="All typographic
title="Typography" elements are responsive, allowing text to scale gracefully across devices
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports." and viewports." canonical="typography.html" }
canonical="typography.html"
}
</head> </head>
<body> <body>
@ -18,7 +16,10 @@
<section id="typography"> <section id="typography">
<hgroup> <hgroup>
<h1>Typography</h1> <h1>Typography</h1>
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2> <h2>
All typographic elements are responsive, allowing text to scale
gracefully across devices and viewports.
</h2>
</hgroup> </hgroup>
<figure> <figure>
<table role="grid"> <table role="grid">
@ -109,38 +110,48 @@
<h5>Heading 5</h5> <h5>Heading 5</h5>
<h6>Heading 6</h6> <h6>Heading 6</h6>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt; &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt; &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre> &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p> <p>
Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
<code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
<code><i>margin-bottom</i></code> are collapsed and the
<code>:last-child</code> is muted.
</p>
<article aria-label="Hgroup example"> <article aria-label="Hgroup example">
<hgroup> <div class="headings">
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3> <h3>Subtitle for heading 2</h3>
</hgroup> </div>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre> &lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Inline text elements:</p> <p>Inline text elements:</p>
<article aria-label="Inline text examples"> <article aria-label="Inline text examples">
<div class="grid"> <div class="grid">
<div> <div>
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p> <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p> <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p> <p>
<em>Italic</em> <code>i</code> <code>em</code>
<code>cite</code>
</p>
<p><del>Deleted</del> <code>del</code></p> <p><del>Deleted</del> <code>del</code></p>
<p><ins>Inserted</ins> <code>ins</code></p> <p><ins>Inserted</ins> <code>ins</code></p>
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p> <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@ -155,44 +166,46 @@
</div> </div>
</div> </div>
</article> </article>
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p> <p>
Links come with <code>.secondary</code> and
<code>.contrast</code> styles.
</p>
<article aria-label="Links examples"> <article aria-label="Links examples">
<a href="#" onclick="event.preventDefault()">Primary</a><br> <a href="#" onclick="event.preventDefault()">Primary</a><br />
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br> <a href="#" onclick="event.preventDefault()" class="secondary"
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br> >Secondary</a
><br />
<a href="#" onclick="event.preventDefault()" class="contrast"
>Contrast</a
><br />
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre> &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
<p>Blockquote:</p> <p>Blockquote:</p>
<article aria-label="Blockquote example"> <article aria-label="Blockquote example">
<blockquote> <blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. "Maecenas vehicula metus tellus, vitae congue turpis hendrerit
Nam at dui sit amet ipsum cursus ornare." non. Nam at dui sit amet ipsum cursus ornare."
<footer> <footer>
<cite>- Phasellus eget lacinia</cite> <cite>- Phasellus eget lacinia</cite>
</footer> </footer>
</blockquote> </blockquote>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>blockquote</b>&gt;
<pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare." Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt; &lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt; &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt; &lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre> &lt;/<b>blockquote</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}
</div> </div>
</main> </main>
<script src="js/commons.min.js"></script> <script src="js/commons.min.js"></script>

11
docs/typography.html
View file

File diff suppressed because one or more lines are too long

22
scss/content/_typography.scss
View file

@ -181,7 +181,8 @@ ul {
} }
// Heading group // Heading group
hgroup { @if $enable-classes == false {
hgroup {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
> * { > * {
@ -194,6 +195,25 @@ hgroup {
font-size: 1rem; font-size: 1rem;
font-family: unset; font-family: unset;
} }
}
}
@if $enable-classes {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
} }
// Paragraphs // Paragraphs