From 1c11c4975b3d7815abcfbb42823428ad546b5f98 Mon Sep 17 00:00:00 2001 From: Lucas Date: Wed, 11 Dec 2019 08:46:32 +0700 Subject: [PATCH] Add Scrollspy for docs --- docs/css/pico.docs.css | 30 ++-- docs/css/pico.docs.min.css | 2 +- docs/index.html | 2 +- docs/js/pico.docs.js | 9 ++ docs/js/pico.docs.min.js | 2 +- docs/js/src/aside.js | 15 +- docs/js/src/most-visible.js | 161 ++++++++++++++++++++++ docs/js/src/scrollspy.js | 85 ++++++++++++ docs/scss/components/_nav.scss | 2 +- docs/scss/components/_theme-switcher.scss | 2 +- docs/scss/content/_typography.scss | 30 ++-- docs/scss/layout/_aside.scss | 22 ++- docs/scss/layout/_documentation.scss | 6 +- docs/scss/layout/_main.scss | 1 + scss/components/_accordion.scss | 1 - 15 files changed, 310 insertions(+), 60 deletions(-) create mode 100644 docs/js/src/most-visible.js create mode 100644 docs/js/src/scrollspy.js diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index 1039a03e..96f16c90 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -158,12 +158,16 @@ main > aside li a svg { vertical-align: middle; } -main > aside a:focus, 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; @@ -184,12 +188,6 @@ main > aside details[open] summary { color: var(--h3); } -[role=document] section > h1, -[role=document] section > h2, -[role=document] section > h3 { - line-height: 1; -} - /** * Docs: Documentation */ @@ -395,7 +393,7 @@ body > nav { box-shadow: 0px 1px 0 var(--nav-border); } -body > nav li a { +body > nav a { border-radius: 0; } @@ -423,7 +421,7 @@ body > nav ul:first-of-type li:nth-of-type(2) { /** * Docs: Theme switcher */ -button.switcher { +.switcher { position: fixed; right: 0.5rem; bottom: 1rem; @@ -436,7 +434,7 @@ button.switcher { box-shadow: var(--card-shadow); } -button.switcher::after { +.switcher::after { display: inline-block; width: 1rem; height: 1rem; @@ -448,7 +446,7 @@ button.switcher::after { transition: transform 0.2s ease-in-out; } -button.switcher i { +.switcher i { display: inline-block; max-width: 0; padding: 0; @@ -458,27 +456,27 @@ button.switcher i { white-space: nowrap; } -button.switcher:hover, button.switcher:focus { +.switcher:hover, .switcher:focus { max-width: 100%; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button.switcher:hover::after { +.switcher:hover::after { transform: rotate(180deg); } -button.switcher:hover i { +.switcher:hover i { max-width: 100%; padding: 0 0.5rem 0 0.25rem; transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out; } -button.switcher:focus { +.switcher:focus { box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); } @media (min-width: 576px) { - button.switcher { + .switcher { right: 1rem; } } diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index f3c26446..d363d922 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: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:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image: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='%23808080' 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");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:2rem}main>aside nav h1{margin-bottom:1.5rem}@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,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}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)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#start a[role=button] svg{padding-left:.66rem;vertical-align:baseline}#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:0.25rem;border-top-left-radius:0.25rem}}#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: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");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: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='%232c4049' 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")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[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:1rem;right:1rem}}[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 li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.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 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file + */: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:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image: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='%23808080' 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");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:2rem}main>aside nav h1{margin-bottom:1.5rem}@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)}#start a[role=button] svg{padding-left:.66rem;vertical-align:baseline}#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:0.25rem;border-top-left-radius:0.25rem}}#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: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");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: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='%232c4049' 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")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[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:1rem;right:1rem}}[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 ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.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 0.2s ease-in-out}.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 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 5835daef..75da97b6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -79,7 +79,7 @@
  • Tooltips
    • -
    +
    Extend
    • diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index 7dd2a3cb..6a717cb1 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -1,4 +1,13 @@ +/*! + * Add some magic to Pico docs + * + * Pico.css - https://picocss.com + * Copyright 2019 - Licensed under MIT + */ + // @prepros-append src/aside.js // @prepros-append src/theme-switcher.js // @prepros-append src/grid.js // @prepros-append src/color-picker.js +// @prepros-append src/most-visible.js +// @prepros-append src/scrollspy.js diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index ed1269e8..5802754f 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));f.currentTheme=e}var f={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(f.button.element);e.className=f.button.class,document.querySelector(f.target).appendChild(e),a(f.currentTheme);for(var t=document.querySelectorAll(f.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,f={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(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrentf.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function n(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={target:"#customization h5",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:"#000"},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:"#000"},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:"#000"},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+='',s.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(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),o=0;o]*>?/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){for(var r=document.querySelectorAll(u.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var u={target:"#customization h5",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:"#000"},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:"#000"},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:"#000"},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+='',u.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(u.target).after(a);for(var n=document.querySelectorAll(u.selectorButton),o=0;o 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/aside.js b/docs/js/src/aside.js index 84bc545c..4d367f20 100644 --- a/docs/js/src/aside.js +++ b/docs/js/src/aside.js @@ -7,13 +7,16 @@ (function() { - // Close details if aside > nav have a scrollbar - var nav = document.querySelector("aside nav"); - var navDetails = document.querySelectorAll("aside details"); + if (window.matchMedia("(min-width: 992px)").matches) { - if (nav.clientHeight < nav.scrollHeight) { - for (var i = 1; i < navDetails.length; i++) { - navDetails[i].removeAttribute("open"); + // Close details if aside > nav have a scrollbar + var nav = document.querySelector("aside nav"); + var navDetails = document.querySelectorAll("aside details"); + + if (nav.clientHeight < nav.scrollHeight) { + for (var i = 1; i < navDetails.length; i++) { + navDetails[i].removeAttribute("open"); + } } } diff --git a/docs/js/src/most-visible.js b/docs/js/src/most-visible.js new file mode 100644 index 00000000..0fc2b6fd --- /dev/null +++ b/docs/js/src/most-visible.js @@ -0,0 +1,161 @@ +/** + * Most Visible v1.4.0 + * + * @author Andy Palmer + * @license MIT + */ + +(function (root, factory) { + // Universal Module Definition + /* jshint strict:false */ + /* global define: false, module: false */ + if (typeof define === 'function' && define.amd) { + define([], function () { + return factory(root); + }); + } else if (typeof module === 'object' && module.exports) { + module.exports = factory(root); + } else { + root.mostVisible = factory(root); + } +}(typeof self !== 'undefined' ? self : this, function (window) { + /* jshint unused: vars */ + + 'use strict'; + + /** + * MostVisible constructor + * + * @param {NodeList|string} elements + * @param {Object} options + * @constructor + */ + function MostVisible(elements, options) { + if (!(this instanceof MostVisible)) { + return (new MostVisible(elements, options)).getMostVisible(); + } + + if (typeof elements === 'string') { + elements = document.querySelectorAll(elements); + } + + this.elements = elements; + this.options = extend({}, MostVisible.defaults, options); + } + + /** + * MostVisible default options + * + * @namespace + * @property {object} defaults Default options hash. + * @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height. + * @property {number} defaults.offset An offset to take into account when calculating visibility. + */ + MostVisible.defaults = { + percentage: false, + offset: 0 + }; + + MostVisible.prototype = { + /** + * Returns the most visible element from the instance's NodeList. + * + * @returns {Element} Most visible element. + */ + getMostVisible: function () { + var element = null, + viewportHeight = document.documentElement.clientHeight, + maxVisible = 0; + + for (var i = 0; i < this.elements.length; i++) { + var currentVisible = this.getVisibleHeight(this.elements[i], viewportHeight); + + if (currentVisible > maxVisible) { + maxVisible = currentVisible; + element = this.elements[i]; + } + } + + return element; + }, + + /** + * Returns the visible height of an element. + * + * @param {Element} element Element to check the visibility of. + * @param {number} viewportHeight + * @returns {number} Visible height of the element in pixels or a percentage of the element's total height. + */ + getVisibleHeight: function (element, viewportHeight) { + var rect = element.getBoundingClientRect(), + rectTopOffset = rect.top - this.options.offset, + rectBottomOffset = rect.bottom - this.options.offset, + height = rect.bottom - rect.top, + visible = { + top: rectTopOffset >= 0 && rectTopOffset < viewportHeight, + bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight + }, + visiblePx = 0; + + if (visible.top && visible.bottom) { + // Whole element is visible + visiblePx = height; + } else if (visible.top) { + visiblePx = viewportHeight - rect.top; + } else if (visible.bottom) { + visiblePx = rectBottomOffset; + } else if (height > viewportHeight && rectTopOffset < 0) { + var absTop = Math.abs(rectTopOffset); + + if (absTop < height) { + // Part of the element is visible + visiblePx = height - absTop; + } + } + + if (this.options.percentage) { + return (visiblePx / height) * 100; + } + + return visiblePx; + } + }; + + /* + MostVisible.makeJQueryPlugin = function ($) { + if (!$) { + return; + } + + $.fn.mostVisible = function (options) { + var instance = new MostVisible(this.get(), options); + return this.filter(instance.getMostVisible()); + }; + }; + */ + + // Try adding the jQuery plugin to window.jQuery + // MostVisible.makeJQueryPlugin(window.jQuery); + + /** + * Extends obj by adding the properties of all other objects passed to the function. + * + * @param {...Object} obj + * @returns {Object} The extended object. + */ + function extend(obj) { + for (var i = 1; i < arguments.length; i++) { + for (var key in arguments[i]) { + if (arguments[i].hasOwnProperty(key)) { + obj[key] = arguments[i][key]; + } + } + } + + return obj; + } + + //noinspection JSAnnotator + return MostVisible; + +})); diff --git a/docs/js/src/scrollspy.js b/docs/js/src/scrollspy.js new file mode 100644 index 00000000..7a0edfcc --- /dev/null +++ b/docs/js/src/scrollspy.js @@ -0,0 +1,85 @@ +/*! + * Scrollspy + * Automatically update nav targets based on scroll position + * + * Require `most-visible.js` from https://github.com/andyexeter/most-visible + * + * Pico.css - https://picocss.com + * Copyright 2019 - Licensed under MIT + */ + +(function() { + + /** + * Config + */ + var scrollspy = { + interval: 75, // Delay for detect scroll stop + sections: '[role="document"] > section', // Target for sections + nav: 'main aside nav', // Target for nav + active: 'active', // .class for active element + }; + + + + /** + * Init + */ + + if (window.matchMedia("(min-width: 992px)").matches) { + activeNav(); + + scrollStop( + function () { + activeNav() + } + ); + } + + + + /** + * Set active section in nav + */ + + function activeNav() { + + // Get active section + var section = mostVisible(scrollspy.sections).getAttribute('id'); + + // Remove all active states + var allActive = document.querySelectorAll(scrollspy.nav + ' a.' + scrollspy.active); + for (var i = 0; i < allActive.length; i++) { + allActive[i].classList.remove(scrollspy.active); + } + + // Set active state + var active = document.querySelector(scrollspy.nav + ' a[href="#' + section + '"]'); + active.classList.add(scrollspy.active); + + // Open details parent + active.parentNode.parentNode.parentNode.setAttribute('open', ''); + } + + + + /** + * Scroll stop + * Detect when the user stop scrolling + * Source: https://vanillajstoolkit.com/helpers/scrollstop/ + * + * @param {Function} callback The function to run after scrolling + * + */ + + function scrollStop(callback) { + var isScrolling; + window.addEventListener('scroll', function (event) { + window.clearTimeout(isScrolling); + isScrolling = setTimeout(function() { + callback(); + }, scrollspy.interval); + }, false); + } + +})(); diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss index d5669f15..711bdae5 100644 --- a/docs/scss/components/_nav.scss +++ b/docs/scss/components/_nav.scss @@ -13,7 +13,7 @@ body > nav { background-color: var(--nav-background); box-shadow: 0px 1px 0 var(--nav-border); - li a { + a { border-radius: 0; } diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss index 1f4955db..b7ee831a 100644 --- a/docs/scss/components/_theme-switcher.scss +++ b/docs/scss/components/_theme-switcher.scss @@ -2,7 +2,7 @@ * Docs: Theme switcher */ -button.switcher { +.switcher { position: fixed; right: $spacing-gutter/2; bottom: $spacing-gutter; diff --git a/docs/scss/content/_typography.scss b/docs/scss/content/_typography.scss index 1508ba64..d5de849a 100644 --- a/docs/scss/content/_typography.scss +++ b/docs/scss/content/_typography.scss @@ -2,17 +2,19 @@ * Docs: Typography */ - section > hgroup { - margin-bottom: $spacing-typography*2; - } - a[role=button] { - margin-right: $spacing-gutter/4; - margin-bottom: $spacing-typography; - } - [role=document] { - section > h1, - section > h2, - section > h3 { - line-height: 1; - } - } +section > hgroup { + margin-bottom: $spacing-typography*2; +} + +a[role=button] { + margin-right: $spacing-gutter/4; + margin-bottom: $spacing-typography; +} + +[role=document] { + section > h1, + section > h2, + section > h3 { + line-height: 1; + } +} diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss index 86504346..ae2817c8 100644 --- a/docs/scss/layout/_aside.scss +++ b/docs/scss/layout/_aside.scss @@ -40,12 +40,14 @@ main > aside { } } - a, - a.secondary { - &:focus { - background-color: transparent; - color: var(--primary-hover); - } + a.secondary:focus { + background-color: transparent; + color: var(--primary-hover); + } + + a.active, + a.active:hover { + color: var(--primary); } details { @@ -68,11 +70,3 @@ main > aside { } } } - -[role=document] { - section > h1, - section > h2, - section > h3 { - line-height: 1; - } -} diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss index b2ce43d2..a396beb2 100644 --- a/docs/scss/layout/_documentation.scss +++ b/docs/scss/layout/_documentation.scss @@ -125,8 +125,6 @@ // Docs: Forms // –––––––––––––––––––– -#forms { - div.grid { - grid-row-gap: 0; - } +#forms div.grid { + grid-row-gap: 0; } diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss index 241ea4fb..c20dd760 100644 --- a/docs/scss/layout/_main.scss +++ b/docs/scss/layout/_main.scss @@ -80,6 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no content: ''; } + // Form grid // –––––––––––––––––––– diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 203266d1..b687322c 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -52,7 +52,6 @@ details { margin-top: 0; } } - } // Open