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

Add scripts to build and watch files

Browse source
This commit is contained in:
Lucas Larroche 2021-09-12 10:58:05 +07:00
parent 2986278b15
commit 8e028956e9
23 changed files with 13439 additions and 1660 deletions
Download patch file Download diff file Expand all files Collapse all files

129
docs/css/pico.docs.css
View file

@ -5,13 +5,13 @@
* Theme: Additions for docs
*/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
[data-theme=light],
:root:not([data-theme=dark]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
@ -20,21 +20,20 @@
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
}
}
[data-theme="dark"] {
[data-theme=dark] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
}
/**
@ -50,7 +49,6 @@ html {
body > main {
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 992px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
@ -59,62 +57,56 @@ body > main {
grid-template-columns: 200px auto;
}
}
@media (min-width: 1200px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
body > main > aside,
body > main div[role="document"] {
body > main div[role=document] {
min-width: 0;
}
div[role="document"] > section::before {
div[role=document] > section::before {
display: block;
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
content: '';
content: "";
}
@media (min-width: 576px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-4rem - 3.5rem + .5rem);
}
}
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
svg {
@ -128,11 +120,9 @@ main > aside nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav h1 {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: 992px) {
main > aside nav {
position: fixed;
@ -146,47 +136,38 @@ 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.25rem 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;
padding-bottom: 0.25rem;
border-bottom: none;
}
main > aside details summary {
color: var(--h1-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
}
main > aside details summary::after {
display: none;
}
main > aside details[open] > summary:not(:focus) {
color: var(--h1-color);
}
@ -205,7 +186,6 @@ main > aside details[open] > summary:not(:focus) {
margin-bottom: 0;
overflow: hidden;
}
@media (min-width: 576px) {
#customization figure {
grid-template-columns: repeat(18, 1fr);
@ -214,13 +194,11 @@ main > aside details[open] > summary:not(:focus) {
border-top-left-radius: var(--border-radius);
}
}
#customization figure ~ article {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#customization figure button {
margin-bottom: 0;
padding: 0;
@ -228,57 +206,48 @@ main > aside details[open] > summary:not(:focus) {
border: none;
border-radius: 0;
}
#customization figure button:focus {
box-shadow: none;
}
#customization figure button.picked {
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
background-image: var(--icon-check-dark);
}
#customization h4 {
transition: color var(--transition);
}
#customization pre[data-theme="generated"] {
#customization pre[data-theme=generated] {
border-color: var(--primary);
}
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
}
@media (min-width: 576px) {
#grids button {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
}
#grids button svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;
}
#grids .grid > * {
padding: calc(var(--spacing) / 2) 0;
border-radius: var(--border-radius);
@ -286,11 +255,9 @@ main > aside details[open] > summary:not(:focus) {
font-size: 87.5%;
text-align: center;
}
#grids details {
margin-top: calc(var(--typography-spacing-vertical) * 2);
}
#grids details svg {
vertical-align: bottom;
}
@ -327,46 +294,43 @@ section > pre {
box-shadow: var(--card-box-shadow);
}
[data-theme="invalid"],
[data-theme="valid"] {
[data-theme=invalid],
[data-theme=valid] {
position: relative;
margin-bottom: 0 !important;
}
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
[data-theme=invalid]:before,
[data-theme=valid]:before {
display: block;
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.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 {
[data-theme=invalid]:before,
[data-theme=valid]:before {
top: var(--spacing);
right: var(--spacing);
}
}
[data-theme="invalid"] code,
[data-theme="valid"] code {
[data-theme=invalid] code,
[data-theme=valid] code {
padding: calc(var(--spacing) * 1.625) 0;
}
[data-theme="invalid"]:before {
[data-theme=invalid]:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
[data-theme="valid"]:before {
[data-theme=valid]:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
/**
@ -383,15 +347,12 @@ body > nav {
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
}
body > nav a {
border-radius: 0;
}
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
@ -400,17 +361,14 @@ body > nav ul:first-of-type li:first-of-type a {
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
color: var(--h1-color);
}
@media (min-width: 992px) {
body > nav ul:first-of-type li:nth-of-type(2) {
display: inline;
@ -426,13 +384,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
.switcher::after {
display: inline-block;
width: 1rem;
@ -441,39 +398,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
.switcher i {
display: inline-block;
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
.switcher:hover, .switcher:focus {
max-width: 100%;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.switcher:hover::after {
transform: rotate(180deg);
}
.switcher:hover i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: 576px) {
.switcher {
right: var(--spacing);

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

File diff suppressed because one or more lines are too long

1
docs/index.html
View file

@ -1257,6 +1257,7 @@
</main><!-- ./ Main -->
<!-- JavaScript -->
<script src="//unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script>
</body>

3
docs/js/pico.docs.js
View file

@ -6,7 +6,6 @@
*/
// Imports
import * as mostVisible from './src/most-visible.min.js';
import { aside } from './src/aside.js';
import { themeSwitcher } from './src/theme-switcher.js';
import { materialDesignColors } from './src/material-design-colors.js';
@ -33,4 +32,4 @@ colorPicker.init();
grid.init();
// Scrollspy
scrollspy.init(mostVisible);
scrollspy.init();

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

File diff suppressed because one or more lines are too long

7
docs/js/src/most-visible.min.js vendored
View file

@ -1,7 +0,0 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});

8
docs/js/src/scrollspy.js
View file

@ -11,7 +11,6 @@
export const scrollspy = {
// Config
mostVisible: null,
minWidth: '992px',
interval: 75,
targets: {
@ -22,10 +21,7 @@ export const scrollspy = {
// Init
init(mostVisible) {
if (this.mostVisible == null) {
this.mostVisible = mostVisible;
}
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
this.setActiveNav();
this.scrollStop();
@ -37,7 +33,7 @@ export const scrollspy = {
setActiveNav() {
// Get active section
let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
// Remove all active states
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);

0
docs/scss/themes/docs.scss → docs/scss/themes/_docs.scss
View file