From 7fca82b2c8c9613ff32275b37ee546ac7b9eb36f Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 27 Oct 2020 10:24:22 +0700 Subject: [PATCH 01/14] Fix indentation --- docs/scss/layout/_document.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/scss/layout/_document.scss b/docs/scss/layout/_document.scss index 61992f69..5eff7671 100644 --- a/docs/scss/layout/_document.scss +++ b/docs/scss/layout/_document.scss @@ -2,6 +2,6 @@ * Docs: Document */ - html { - scroll-behavior:smooth; - } +html { + scroll-behavior:smooth; +} From e1d7b5a24786e547e461b00e9c1e072760e9767d Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 27 Oct 2020 10:42:27 +0700 Subject: [PATCH 02/14] Fix default file URL --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 44fee5be..68d5510e 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.2.0", "description": "Graceful & Minimal CSS design system in pure semantic HTML", "author": "Lucas Larroche", - "main": "./css/pico.min.css", + "main": "css/pico.min.css", "homepage": "https://picocss.com", "license": "MIT", "repository": { From a9c851d5b35a549920260590fc93371db620e1b5 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 27 Oct 2020 11:19:44 +0700 Subject: [PATCH 03/14] Docs: Changing the height of SVGs in px --- docs/css/pico.docs.css | 10 +++++++++- docs/css/pico.docs.min.css | 2 +- docs/index.html | 14 +++++++------- docs/js/pico.docs.min.js | 2 +- docs/js/src/grid.js | 4 ++-- docs/scss/components/_nav.scss | 13 +++++++++---- docs/scss/layout/_main.scss | 7 +++++++ 7 files changed, 36 insertions(+), 16 deletions(-) diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index 1dfd6de3..b6942ad6 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -124,6 +124,10 @@ form.grid > button { margin-bottom: 0; } +svg { + height: 1rem; +} + /** * Docs: Aside */ @@ -402,7 +406,7 @@ body > nav a { border-radius: 0; } -body > nav a svg { +body > nav svg { vertical-align: text-bottom; } @@ -415,6 +419,10 @@ body > nav ul:first-of-type li:first-of-type a { 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) { display: none; margin-left: var(--spacing-gutter); diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 7c6dd724..d7af34de 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles 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");--icon-check-dark: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(0, 0, 0, 0.75)' 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")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;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: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: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: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:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{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=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;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}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file + */: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");--icon-check-dark: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(0, 0, 0, 0.75)' 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")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;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: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: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: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:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{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=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);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){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;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}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index add92ddb..659db742 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,7 +18,7 @@
  • - @@ -30,7 +30,7 @@
  • Docs
  • - @@ -360,7 +360,7 @@

    To go further, discover how to merge Pico with the Bootstrap grid system.

    -
    • -
      • - @@ -1136,11 +1136,11 @@

        Progress

        Progress bar element in pure HTML, without JavaScript.

        -
        +
        -
        <progress value="25" max="100"></progress>
+
        <progress value="25" max="100"></progress>
 <progress indeterminate="true"></progress>
        diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index 812fce0f..bfa9d77a 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));n.currentTheme=e}var n={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(n.button.element);e.className=n.button.class,document.querySelector(n.target).appendChild(e),a(n.currentTheme);for(var t=document.querySelectorAll(n.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,n={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){var a={".name":e.charAt(0).toUpperCase()+e.substring(1)+" ",".c500":t[500],".c600":t[600],".c700":t[700],".c600-outline-light":n(t[600],.125),".c600-outline-dark":n(t[600],.25),".inverse":t.inverse};Object.keys(a).forEach(function(e){for(var t=document.querySelectorAll(i.selectorTheme+" "+e),r=0;r>16&255,r>>8&255,255&r].join(", ")+", "+t+")";throw new Error("Bad Hex")}var i={target:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',i.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(i.target).before(a);for(var n=document.querySelectorAll(i.selectorButton),f=0;f section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},n.interval)},!1))}(); \ No newline at end of file +!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));n.currentTheme=e}var n={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(n.button.element);e.className=n.button.class,document.querySelector(n.target).appendChild(e),a(n.currentTheme);for(var t=document.querySelectorAll(n.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,n={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){var a={".name":e.charAt(0).toUpperCase()+e.substring(1)+" ",".c500":t[500],".c600":t[600],".c700":t[700],".c600-outline-light":n(t[600],.125),".c600-outline-dark":n(t[600],.25),".inverse":t.inverse};Object.keys(a).forEach(function(e){for(var t=document.querySelectorAll(i.selectorTheme+" "+e),r=0;r>16&255,r>>8&255,255&r].join(", ")+", "+t+")";throw new Error("Bad Hex")}var i={target:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',i.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(i.target).before(a);for(var n=document.querySelectorAll(i.selectorButton),f=0;f section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},n.interval)},!1))}(); \ No newline at end of file diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js index 08edc411..66d37685 100644 --- a/docs/js/src/grid.js +++ b/docs/js/src/grid.js @@ -61,7 +61,7 @@ function addButtons() { var buttons = document.createElement('P'); buttons.innerHTML = '' + '

        Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

        -
        +

        Light theme

        @@ -153,7 +153,7 @@ </article>
        -
        +

        Dark theme

        @@ -176,7 +176,7 @@

        Example: pick a color!

        -
        +

        Custom theme

        @@ -589,7 +589,7 @@

        Blockquote:

        -
        +
        "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."