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

Docs: Changing the height of SVGs in px

Browse source
This commit is contained in:
Lucas 2020-10-27 11:19:44 +07:00
parent e1d7b5a247
commit a9c851d5b3
7 changed files with 36 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/css/pico.docs.css
View file

@ -124,6 +124,10 @@ form.grid > button {
margin-bottom: 0; margin-bottom: 0;
} }
svg {
height: 1rem;
}
/** /**
* Docs: Aside * Docs: Aside
*/ */
@ -402,7 +406,7 @@ body > nav a {
border-radius: 0; border-radius: 0;
} }
body > nav a svg { body > nav svg {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
@ -415,6 +419,10 @@ body > nav ul:first-of-type li:first-of-type a {
color: var(--background); color: var(--background);
} }
body > nav ul:first-of-type li:first-of-type a svg {
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) { body > nav ul:first-of-type li:nth-of-type(2) {
display: none; display: none;
margin-left: var(--spacing-gutter); margin-left: var(--spacing-gutter);

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

File diff suppressed because one or more lines are too long

14
docs/index.html
View file

@ -18,7 +18,7 @@
<ul> <ul>
<li> <li>
<a href="https://picocss.com" aria-label="Back home"> <a href="https://picocss.com" aria-label="Back home">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/> <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
</svg> </svg>
</a> </a>
@ -30,7 +30,7 @@
<li><a href="#docs" class="secondary">Docs</a></li> <li><a href="#docs" class="secondary">Docs</a></li>
<li> <li>
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"> <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path> <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg> </svg>
</a> </a>
@ -360,7 +360,7 @@
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</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> <details>
<summary> <summary>
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line>
@ -1069,7 +1069,7 @@
<ul> <ul>
<li> <li>
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu"> <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"> <line x1="3" y1="12" x2="21" y2="12">
</line><line x1="3" y1="6" x2="21" y2="6"> </line><line x1="3" y1="6" x2="21" y2="6">
</line><line x1="3" y1="18" x2="21" y2="18"> </line><line x1="3" y1="18" x2="21" y2="18">
@ -1084,7 +1084,7 @@
<ul> <ul>
<li> <li>
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter"> <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg> </svg>
</a> </a>
@ -1136,11 +1136,11 @@
<h2>Progress</h2> <h2>Progress</h2>
<h3>Progress bar element in pure HTML, without JavaScript.</h3> <h3>Progress bar element in pure HTML, without JavaScript.</h3>
</hgroup> </hgroup>
<article aria-label="Tooltips examples"> <article aria-label="Progress examples">
<progress value="25" max="100"></progress> <progress value="25" max="100"></progress>
<progress indeterminate="true"></progress> <progress indeterminate="true"></progress>
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt; <pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre> &lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article> </article>

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

File diff suppressed because one or more lines are too long

4
docs/js/src/grid.js
View file

@ -61,7 +61,7 @@
function addButtons() { function addButtons() {
var buttons = document.createElement('P'); var buttons = document.createElement('P');
buttons.innerHTML = '<button class="secondary add">' buttons.innerHTML = '<button class="secondary add">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">' + '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="12" y1="5" x2="12" y2="19">' + '<line x1="12" y1="5" x2="12" y2="19">'
+ '</line><line x1="5" y1="12" x2="19" y2="12">' + '</line><line x1="5" y1="12" x2="19" y2="12">'
+ '</line>' + '</line>'
@ -70,7 +70,7 @@
+ '</button>' + '</button>'
+ '<button class="secondary remove">' + '<button class="secondary remove">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">' + '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="5" y1="12" x2="19" y2="12"></line>' + '<line x1="5" y1="12" x2="19" y2="12"></line>'
+ '</svg>' + '</svg>'
+ ' Remove column' + ' Remove column'

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

@ -15,12 +15,13 @@ body > nav {
a { a {
border-radius: 0; border-radius: 0;
svg {
vertical-align: text-bottom;
}
} }
svg {
vertical-align: text-bottom;
}
// Band & Title
ul:first-of-type li { ul:first-of-type li {
// Brand // Brand
@ -32,6 +33,10 @@ body > nav {
padding: 0; padding: 0;
background: var(--h1); background: var(--h1);
color: var(--background); color: var(--background);
svg {
height: 3.5rem;
}
} }
} }

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

@ -88,3 +88,10 @@ form.grid {
margin-bottom: 0; margin-bottom: 0;
} }
} }
// Embedded SVG
// ––––––––––––––––––––
svg {
height: 1rem;
}