mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -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-24 00:47:01 +07:00 • committed by GitHub
commit ab9c1a193b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 60 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
css/pico.classless.css
View file

@ -795,7 +795,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -1734,7 +1734,7 @@ code em {
kbd { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color); color: var(--code-kbd-color);
vertical-align: middle; vertical-align: baseline;
} }
/** /**

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.css
View file

@ -841,7 +841,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -1916,7 +1916,7 @@ code em {
kbd { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color); color: var(--code-kbd-color);
vertical-align: middle; vertical-align: baseline;
} }
/** /**

4
css/pico.fluid.classless.css
View file

@ -765,7 +765,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -1704,7 +1704,7 @@ code em {
kbd { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color); color: var(--code-kbd-color);
vertical-align: middle; vertical-align: baseline;
} }
/** /**

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.css
View file

@ -770,7 +770,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

19
docs/forms.html
View file

@ -27,7 +27,7 @@
&lt;/<b>form</b>&gt;</code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt; &lt;/<b>form</b>&gt;</code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt; &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em> &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> Publish on my profile my accomplishments</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt; &lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt; &lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt; &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
@ -49,22 +49,35 @@
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large Large
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
Extra Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em> <em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
I agree to the Terms and Conditions I agree to the Terms and Conditions
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
I agree to share my information with partners
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em> <em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
Publish on my profile Publish on my profile
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
Publish on my profile my accomplishments
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code>&lt;<b>script</b>&gt; &lt;/<b>fieldset</b>&gt;</code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>; <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- File browser --&gt;</em> &lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- File browser --&gt;</em>

29
docs/src/forms.html
View file

@ -114,18 +114,30 @@
<input type="radio" id="large" name="size" value="large"> <input type="radio" id="large" name="size" value="large">
Large Large
</label> </label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="terms"> <label for="terms">
<input type="checkbox" id="terms" name="terms"> <input type="checkbox" id="terms" name="terms">
I agree to the Terms and Conditions I agree to the Terms and Conditions
</label> </label>
<label for="terms_sharing">
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
I agree to share my information with partners
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="switch"> <label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch"> <input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile Publish on my profile
</label> </label>
<label for="switch_disabled">
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
Publish on my profile my accomplishments
</label>
</fieldset> </fieldset>
<footer class="code"> <footer class="code">
@ -151,22 +163,35 @@
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large Large
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
Extra Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em> <em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
I agree to the Terms and Conditions I agree to the Terms and Conditions
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
I agree to share my information with partners
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em> <em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
Publish on my profile Publish on my profile
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
Publish on my profile my accomplishments
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre> &lt;/<b>fieldset</b>&gt;</code></pre>
</footer> </footer>

2
scss/content/_code.scss
View file

@ -87,5 +87,5 @@ code {
kbd { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color); color: var(--code-kbd-color);
vertical-align: middle; vertical-align: baseline;
} }

2
scss/content/_typography.scss
View file

@ -228,7 +228,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
// Blockquote // Blockquote