mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
Merge branch 'dev' into remove-a-disabled-css
This commit is contained in:
Lucas Larroche
GitHub
commit
42aa7d2e34
23 changed files with 125 additions and 68 deletions
|
|
@ -23,6 +23,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -1082,6 +1083,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
11
css/pico.css
11
css/pico.css
|
|
@ -23,6 +23,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -798,13 +799,16 @@ ul ~ h6 {
|
|||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
hgroup {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
hgroup > * {
|
||||
hgroup > *,
|
||||
.headings > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
hgroup > *:last-child {
|
||||
hgroup > *:last-child,
|
||||
.headings > *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
|
|
@ -1264,6 +1268,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,6 +23,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -1052,6 +1053,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -26,6 +26,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -727,13 +728,16 @@ ul ~ h6 {
|
|||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
hgroup {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
hgroup > * {
|
||||
hgroup > *,
|
||||
.headings > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
hgroup > *:last-child {
|
||||
hgroup > *:last-child,
|
||||
.headings > *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
|
|
@ -1192,6 +1196,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -19,6 +19,7 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,7 @@
|
|||
</<b>dialog</b>></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><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<i>aria-label</i>=<u>"Close"</u>>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
<i>role</i>=<u>"button"</u>>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<pre><code><em><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<i>aria-label</i>=<u>"Close"</u>>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
|
|
@ -122,13 +122,13 @@
|
|||
<i>role</i>=<u>"button"</u>>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Typography"
|
||||
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
|
||||
canonical="typography.html"
|
||||
}
|
||||
${require('./_head.html') title="Typography" description="All typographic
|
||||
elements are responsive, allowing text to scale gracefully across devices
|
||||
and viewports." canonical="typography.html" }
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="typography-link"}
|
||||
|
||||
|
||||
<div role="document">
|
||||
<section id="typography">
|
||||
<hgroup>
|
||||
<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>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
|
|
@ -109,38 +110,48 @@
|
|||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||
<p>
|
||||
Inside a <code><<b>hgroup</b>></code> or a
|
||||
<code><<b>div</b> <i>class</i>=<u>"headings"</u>></code> all
|
||||
<code><i>margin-bottom</i></code> are collapsed and the
|
||||
<code>:last-child</code> is muted.
|
||||
</p>
|
||||
<article aria-label="Hgroup example">
|
||||
<hgroup>
|
||||
<div class="headings">
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Subtitle for heading 2</h3>
|
||||
</hgroup>
|
||||
</div>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>hgroup</b>></code></pre>
|
||||
|
||||
<pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>div</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Inline text elements:</p>
|
||||
<article aria-label="Inline text examples">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</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><ins>Inserted</ins> <code>ins</code></p>
|
||||
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||||
|
|
@ -155,44 +166,46 @@
|
|||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</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="contrast"
|
||||
>Contrast</a
|
||||
><br />
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Blockquote:</p>
|
||||
<article aria-label="Blockquote example">
|
||||
<blockquote>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit
|
||||
non. Nam at dui sit amet ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>blockquote</b>>
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
<<b>footer</b>>
|
||||
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>blockquote</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -129,6 +129,7 @@ label,
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
|
|
|
|||
|
|
@ -181,18 +181,38 @@ ul {
|
|||
}
|
||||
|
||||
// Heading group
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
@if $enable-classes == false {
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@
|
|||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
|
||||
// Transitions
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue