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