@@ -106,7 +106,10 @@
1. Download Pico:
Download pico.css
- 2. Link the CSS (~5KB minified and gzipped) :
+
+ 2. Link the CSS:(~5KB minified and gzipped)
+
<link rel ="stylesheet" href ="css/pico.min.css" >Starter template:
@@ -124,6 +127,7 @@
</main >
</body >
</html >
+
@@ -133,6 +137,9 @@
Pico is shipped with 2 consistents themes: Light & Dark.
The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme : dark
+
+ ...
+
Themes can be forced on document level <html data-theme ="light" > or on any HTML element <article data-theme ="dark" >.
Light theme
@@ -254,10 +261,10 @@
Class-less version
- For wild HTML purists! 😈
+ For wild HTML purists!
Pico provide a .classless version (Example ).
- Obviously this version do not include .container, .container-fluid, .grid, .secondary and .outline.
+ Obviously this version do not include .container, .container-fluid, .grid, .secondary, .contrast and .outline.
In this version, <header >, <main > and <footer > act as containers to define a centered or a fluid viewport.
Usage:
Use the default .classless version if you need centered viewports:
@@ -344,6 +351,22 @@
Columns intentionally collapses below large devices (992px ).
+
+
+
+
+ More about grids
+
+ As Pico focus on native HTML elements, we kept this grid system very minimalist.
+ A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the Pico spirit .
+ If you need a quick way to prototyping or build a complex layouts, you can look about Flexbox grid layouts . For example: Bootstrap Grid System only or Flexbox Grid .
+ If you need a light and custom grid, you can look about CSS Grid Generators . For example: CSS Grid Generator , Layoutit! or Griddy .
+ Alternatively you can Learn about CSS Grid .
+
+
@@ -542,6 +565,17 @@
+ Links come with .secondary and .contrast styles.
+
+ Primary Secondary Contrast <a href ="#" >Primary</a >
+<a href ="#" class ="secondary" >Secondary</a >
+<a href ="#" class ="contrast" >Contrast</a >
@@ -567,30 +601,25 @@
<a href ="#" role ="button" >Link</a >
- Buttons come with a .secondary neutral style.
+ Buttons come with .secondary and .contrast styles.
- Link
- Button
- Secondary
+ Contrast
-<a href ="#" role ="button" class ="secondary" >Link</a >
-<button >Button</button class ="secondary" >
-<input type ="submit" class ="secondary" >
-<input type ="reset" ><a href ="#" role ="button" class ="secondary" >Secondary</a >
+<a href ="#" role ="button" class ="contrast" >Contrast</a >
- Also includes the classic .outline style.
+ And a classic .outline variant.
- Link
- Link
- Button
- Button
+ Primary
+ Secondary
+ Contrast
+
+<a href ="#" role ="button" class ="outline" >Primary</a >
+<a href ="#" role ="button" class ="secondary outline" >Secondary</a >
+<a href ="#" role ="button" class ="contrast outline" >Contrast</a ><a href ="#" role ="button" class ="outline" >Link</a >
-<a href ="#" role ="button" class ="outline secondary" >Link</a >
-<button class ="outline" >Button</button >
-<button class ="outline secondary" >Button</button >
@@ -773,7 +802,7 @@
Collapsible elements 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
-
+
Collapsible elements 2
Vestibulum id elit quis massa interdum sodales.
@@ -961,7 +990,7 @@
diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js
index 138dde22..27edb5f9 100644
--- a/docs/js/pico.docs.min.js
+++ b/docs/js/pico.docs.min.js
@@ -1 +1 @@
-!function(){if(document.querySelector("aside nav").clientWidth<200)for(var e=document.querySelectorAll("aside details"),t=1;t]*>?/gm,"")),r.currentTheme=e}var t,r={button:{element:"BUTTON",class:"secondary switcher",on:"Turn on dark mode ",off:"Turn off dark mode "},target:"body",selector:"button.switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};(t=document.createElement(r.button.element)).className=r.button.class,document.querySelector(r.target).appendChild(t),e(r.currentTheme),document.querySelector(r.selector).addEventListener("click",function(){"light"==r.currentTheme?e("dark"):e("light")},!1)}(),function(){function r(e){event.preventDefault();var t,r,a=e.href.split("#");""!=a[1]&&(a=function(e){mobile=window.matchMedia("(max-width: 991.99px)"),mobile.matches||"docs"==e&&(e="start");return e}(a[1]),a=document.getElementById(a),r=a,t=Math.floor(r.getBoundingClientRect().top),window.scrollBy({top:t,left:0,behavior:"smooth"}))}!function(e){for(var t=0;t"+(a+1)+"",r+=" <div >"+(a+1)+"</div >\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class ="grid" >\n'+r+"</section >"}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='f.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(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={list:"json/material-colors.json",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:"#2c4049"},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:"#2c4049"},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:"#2c4049"},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+=']*>?/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);var t=document.querySelectorAll(f.selector);console.log(t);for(var r=0;r"+(a+1)+"",r+=" <div >"+(a+1)+"</div >\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class ="grid" >\n'+r+"</section >"}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='f.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(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={list:"json/material-colors.json",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:"#2c4049"},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:"#2c4049"},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:"#2c4049"},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+='Turn on dark mode',
off: 'Turn off dark mode '
},
target: 'body', // Button append in target
- selector: 'button.switcher', // Button selector in Dom
+ selector: 'button.theme-switcher', // Button selector in Dom
currentTheme: systemColorScheme()
};
@@ -65,17 +65,21 @@
setTheme(switcher.currentTheme);
// Click Listener on Switcher
- document.querySelector(switcher.selector).addEventListener('click', function() {
+ var switchers = document.querySelectorAll(switcher.selector);
+ console.log(switchers);
+ for (var i = 0; i < switchers.length; i++) {
+ switchers[i].addEventListener('click', function(event) {
- // Switch Theme
- if (switcher.currentTheme == 'light') {
- setTheme('dark');
- }
- else {
- setTheme('light');
- }
- }, false);
+ // Switch Theme
+ if (switcher.currentTheme == 'light') {
+ setTheme('dark');
+ }
+ else {
+ setTheme('light');
+ }
+ }, false);
+ }
}
diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss
index d18062e1..d5669f15 100644
--- a/docs/scss/components/_nav.scss
+++ b/docs/scss/components/_nav.scss
@@ -35,7 +35,7 @@ body > nav {
&:nth-of-type(2) {
display: none;
margin-left: $spacing-gutter;
- color: var(--muted-text);
+ color: var(--h1);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;
diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss
index 0bc8af1a..4197ecf9 100644
--- a/docs/scss/layout/_aside.scss
+++ b/docs/scss/layout/_aside.scss
@@ -51,14 +51,19 @@ main > aside {
details {
padding-bottom: .25rem;
border-bottom: none;
- }
- details summary {
- font-weight: 300;
- text-transform: uppercase;
+ summary {
+ font-weight: 300;
+ text-transform: uppercase;
+ color: var(--h3);
- &::after {
- display: none;
+ &::after {
+ display: none;
+ }
+ }
+
+ &[open] summary {
+ color: var(--h3);
}
}
}
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index 1e4f3d6b..1d47f0a7 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -2,6 +2,15 @@
* Docs: Documentation
*/
+// Docs: Themes
+// ––––––––––––––––––––
+
+#themes {
+ button i {
+ font-style: normal;
+ }
+}
+
// Docs: Customization
// ––––––––––––––––––––
@@ -73,9 +82,15 @@
#grids {
button {
- display: inline-block;
- width: auto;
- margin-right: .5rem;
+ display: block;
+ width: 100%;
+ margin-bottom: $spacing-typography/2;
+
+ @media (min-width: map-get($breakpoints, "sm")) {
+ display: inline-block;
+ width: auto;
+ margin-right: .5rem;
+ }
svg {
stroke: var(--secondary);
@@ -91,4 +106,8 @@
background: var(--code-background);
text-align: center;
}
+
+ details {
+ margin-top: $spacing-typography*2;
+ }
}
diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss
index 1bb55181..e6bcf9ba 100644
--- a/docs/scss/layout/_main.scss
+++ b/docs/scss/layout/_main.scss
@@ -35,7 +35,7 @@ body > main {
// Anchors hacks for internal links
// ––––––––––––––––––––
-a[name]:not([href])::before {
+div[role="document"] > section::before {
display: block;
height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
@@ -62,3 +62,20 @@ a[name]:not([href])::before {
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
}
}
+
+
+// External links
+// ––––––––––––––––––––
+
+div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ // Source: https://feathericons.com/
+ $caret-icon-color: "808080"; // Without '#' !important
+ 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='%23" + $caret-icon-color + "' 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: '';
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index dc012b8c..2d9f8181 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -4,7 +4,7 @@
// Enable , , inside as a container
$enable-semantic-container: false !default;
-// Enable ".container" as a container
+// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index ff9ca8e6..71936da5 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -48,6 +48,12 @@ nav {
&:focus {
text-decoration: none;
}
+
+ @if $enable-classes {
+ &.contrast:not([role="button"]) {
+ box-shadow: none;
+ }
+ }
}
}
diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index fcef3c4d..3e3071a7 100644
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -22,8 +22,8 @@
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: $round;
- background: var(--secondary);
- color: var(--secondary-inverse);
+ background: var(--contrast);
+ color: var(--contrast-inverse);
font-size: .85rem;
font-style: normal;
font-weight: normal;
@@ -33,9 +33,9 @@
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
- transition: opacity $transition;
}
+ // Caret
&::after {
padding: 0;
transform: translate(-50%, 0rem);
@@ -44,7 +44,7 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
- color: var(--secondary);
+ color: var(--contrast);
content: '';
}
diff --git a/scss/content/_button-styles.scss b/scss/content/_button-styles.scss
new file mode 100644
index 00000000..55676f11
--- /dev/null
+++ b/scss/content/_button-styles.scss
@@ -0,0 +1,111 @@
+@if $enable-classes {
+
+/**
+ * Button Styles
+ */
+
+ // Button .secondary
+ button.secondary,
+ input.secondary[type="submit"],
+ input[type="reset"],
+ a.secondary[role="button"] {
+ border: 1px solid var(--secondary);
+ background-color: var(--secondary);
+ color: var(--secondary-inverse);
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid var(--secondary-hover);
+ background-color: var(--secondary-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+ }
+ }
+
+
+ // Button .contrast
+ button.contrast,
+ input.contrast[type="submit"],
+ input.contrast[type="reset"],
+ a.contrast[role="button"] {
+ border: 1px solid var(--contrast);
+ background-color: var(--contrast);
+ color: var(--contrast-inverse);
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid var(--contrast-hover);
+ background-color: var(--contrast-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--contrast-focus);
+ }
+ }
+
+
+ // Button .outline
+ button.outline,
+ input.outline[type="submit"],
+ a.outline[role="button"] {
+ border: 1px solid var(--primary);
+ background-color: transparent;
+ color: var(--primary);
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid var(--primary-hover);
+ color: var(--primary-hover);
+ }
+ }
+
+
+ // Button .outline.secondary
+ button.outline.secondary,
+ input.outline.secondary[type="submit"],
+ input.outline[type="reset"],
+ a.outline.secondary[role="button"] {
+ border: 1px solid var(--secondary);
+ background-color: transparent;
+ color: var(--secondary);
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid var(--secondary-hover);
+ color: var(--secondary-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+ }
+ }
+
+
+ // Button .outline.contrast
+ button.outline.contrast,
+ input.outline.contrast[type="submit"],
+ input.outline.contrast[type="reset"],
+ a.outline.contrast[role="button"] {
+ border: 1px solid var(--contrast);
+ background-color: transparent;
+ color: var(--contrast);
+
+ &:hover,
+ &:active,
+ &:focus {
+ border: 1px solid var(--contrast-hover);
+ color: var(--contrast-hover);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 0.2rem var(--contrast-focus);
+ }
+ }
+
+}
diff --git a/scss/content/_button.scss b/scss/content/_button.scss
index 79c27143..fb281cf9 100644
--- a/scss/content/_button.scss
+++ b/scss/content/_button.scss
@@ -94,71 +94,6 @@ input[type="reset"] {
cursor: pointer;
}
-
-// Button .secondary
-@if $enable-classes {
- button.secondary,
- input.secondary[type="submit"],
- input[type="reset"],
- a.secondary[role="button"] {
- border: 1px solid var(--secondary);
- background-color: var(--secondary);
- color: var(--secondary-inverse);
-
- &:hover,
- &:active,
- &:focus {
- border: 1px solid var(--secondary-hover);
- background-color: var(--secondary-hover);
- }
-
- &:focus {
- box-shadow: 0 0 0 0.2rem var(--secondary-focus);
- }
- }
-}
-
-// Button .outline
-@if $enable-classes {
- button.outline,
- input.outline[type="submit"],
- a.outline[role="button"] {
- border: 1px solid var(--primary);
- background-color: transparent;
- color: var(--primary);
-
- &:hover,
- &:active,
- &:focus {
- border: 1px solid var(--primary-hover);
- color: var(--primary-hover);
- }
- }
-}
-
-// Button .outline.secondary
-@if $enable-classes {
- button.outline.secondary,
- input.outline.secondary[type="submit"],
- input.outline[type="reset"],
- a.outline.secondary[role="button"] {
- border: 1px solid var(--secondary);
- background-color: transparent;
- color: var(--secondary);
-
- &:hover,
- &:active,
- &:focus {
- border: 1px solid var(--secondary-hover);
- color: var(--secondary-hover);
- }
-
- &:focus {
- box-shadow: 0 0 0 0.2rem var(--secondary-focus);
- }
- }
-}
-
// Button [disabled]
button,
input[type="submit"],
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index e80c505b..bbc1bf28 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -103,6 +103,24 @@ a {
}
}
+// Link .contrast
+@if $enable-classes {
+ a.contrast:not([role="button"]) {
+ box-shadow: inset 0 -.33rem 0 var(--contrast-border);
+ color: var(--contrast);
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--contrast-hover);
+ }
+
+ &:focus {
+ background-color: var(--contrast-focus);
+ }
+ }
+}
+
// Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1,
@@ -191,7 +209,7 @@ hgroup {
h6{
margin-bottom: 0;
}
- *:last-child {
+ > *:last-child {
color: var(--muted-text);
font-size: 1.125rem;
font-weight: normal;
@@ -248,7 +266,7 @@ ul li {
mark {
padding: .125rem .25rem;
background: var(--mark);
- color: var(--text);
+ color: var(--mark-text);
vertical-align: middle;
}
diff --git a/scss/layout/_scroller.scss b/scss/layout/_scroller.scss
index e2d68e8d..dcf18039 100644
--- a/scss/layout/_scroller.scss
+++ b/scss/layout/_scroller.scss
@@ -13,7 +13,7 @@ figure {
figcaption {
color: var(--muted-text);
font-size: 87.5%;
- padding: 0 $spacing-gutter ;
+ padding: ($spacing-gutter/2) $spacing-gutter;
}
@if map-get($breakpoints, "sm") {
@@ -22,7 +22,7 @@ figure {
margin-left: 0;
figcaption {
- padding: 0;
+ padding: ($spacing-gutter/2) 0;
}
}
}
diff --git a/scss/pico.scss b/scss/pico.scss
index ed5c4606..04561528 100644
--- a/scss/pico.scss
+++ b/scss/pico.scss
@@ -23,6 +23,7 @@
@import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ...
@import "content/button"; // button, a[role=button], ...
+@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, progress, template, [hidden]
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
index a3fb3da0..578bbad5 100644
--- a/scss/themes/_dark.scss
+++ b/scss/themes/_dark.scss
@@ -17,19 +17,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
- --mark: #{rgba($amber-200, .25)};
- // Call-to-Action
+ // Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
- // Secondary Call-to-Action
- --secondary: #{$grey-200};
- --secondary-hover: #{$grey-50};
- --secondary-focus: #{rgba($grey-200, .25)};
- --secondary-inverse: #{$grey-900};
+ @if $enable-classes {
+
+ // Secondary Call-to-Action and links
+ --secondary: #{$grey-600};
+ --secondary-hover: #{$grey-500};
+ --secondary-focus: #{rgba($grey-600, .25)};
+ --secondary-inverse: #{$white};
+
+ // Contrast Call-to-Action and Tooltips
+ --contrast: #{$grey-100};
+ --contrast-hover: #{$white};
+ --contrast-focus: #{rgba($grey-600, .25)};
+ --contrast-border: #{rgba($amber-200, .33)}; // For links
+ --contrast-inverse: #{darken($grey-900, 6%)};
+ }
// Form elements
--input-background: #{darken($grey-900, 6%)};
@@ -38,6 +47,8 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
+ --mark: #{rgba($amber-200, .5)};
+ --mark-text: #{$white};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
@@ -79,19 +90,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
- --mark: #{rgba($amber-200, .25)};
- // Call-to-Action
+ // Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
- // Secondary Call-to-Action
- --secondary: #{$grey-200};
- --secondary-hover: #{$grey-50};
- --secondary-focus: #{rgba($grey-200, .25)};
- --secondary-inverse: #{$grey-900};
+ @if $enable-classes {
+
+ // Secondary Call-to-Action and links
+ --secondary: #{$grey-600};
+ --secondary-hover: #{$grey-500};
+ --secondary-focus: #{rgba($grey-600, .25)};
+ --secondary-inverse: #{$white};
+
+ // Contrast Call-to-Action and Tooltips
+ --contrast: #{$grey-100};
+ --contrast-hover: #{$white};
+ --contrast-focus: #{rgba($grey-600, .25)};
+ --contrast-border: #{rgba($amber-200, .33)}; // For links
+ --contrast-inverse: #{darken($grey-900, 6%)};
+ }
// Form elements
--input-background: #{darken($grey-900, 6%)};
@@ -100,6 +120,8 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
+ --mark: #{rgba($amber-200, .5)};
+ --mark-text: #{$white};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss
index df912313..66d21ffc 100644
--- a/scss/themes/_light.scss
+++ b/scss/themes/_light.scss
@@ -17,19 +17,28 @@
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
- --mark: #{rgba($amber-200, .5)};
- // Primary Call-to-Action
+ // Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
- // Secondary Call-to-Action
- --secondary: #{mix($grey-700, $grey-800)};
- --secondary-hover: #{mix($grey-800, $grey-900)};
- --secondary-focus: #{rgba(mix($grey-700, $grey-800), .125)};
- --secondary-inverse: #{$white};
+ @if $enable-classes {
+
+ // Secondary Call-to-Action and links
+ --secondary: #{$grey-500};
+ --secondary-hover: #{$grey-700};
+ --secondary-focus: #{rgba($grey-500, .125)};
+ --secondary-inverse: #{$white};
+
+ // Contrast Call-to-Action and Tooltips
+ --contrast: #{$grey-800};
+ --contrast-hover: #{mix($grey-900, $black)};
+ --contrast-focus: #{rgba($grey-500, .125)};
+ --contrast-border: #{rgba($amber-200, .5)}; // For links
+ --contrast-inverse: #{$white};
+ }
// Form elements
--input-background: #{$white};
@@ -38,6 +47,8 @@
// Utilities states
--valid: #{$green-600};
--invalid: #{$red-700};
+ --mark: #{rgba($amber-200, .5)};
+ --mark-text: #{$grey-800};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};
--muted-border: #{$grey-50};