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

v1.4.3

Browse source
This commit is contained in:
Lucas Larroche 2022-01-01 15:49:10 +07:00 • committed by GitHub
commit 6b05b161ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 1439 additions and 1278 deletions
Download patch file Download diff file Expand all files Collapse all files

13
README.md
View file

@ -28,7 +28,7 @@ Pico uses simple native HTML tags as much as possible. Less than 10 .classes are
No dependencies, package manager, external files, or JavaScript.
**Responsive everything**
Elegant and consistent adaptative spacings and typography on all devices.
Elegant and consistent adaptive spacings and typography on all devices.
**Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
@ -38,6 +38,7 @@ Shipped with two beautiful color themes, automatically enabled according to the
- [Usage](#usage)
- [Class-less version](#class-less-version)
- [Examples](#examples)
- [Limitations](#limitations)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
@ -70,9 +71,9 @@ npm install @picocss/pico
## Class-less version
Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
In this version, `header`, `main` and `footer` act as container.
In this version, `header`, `main` and `footer` act as containers.
Use the default `.classless` version if you need centered viewports:
@ -134,6 +135,10 @@ Minimalist templates to discover Pico in action:
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
## Limitations
Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
## Documentation
**Getting started**
@ -184,4 +189,4 @@ Website and docs:
Pico Library:
- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))

71
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -120,9 +119,6 @@ dialog > article {
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
small {
--font-size: 0.875em;
@ -172,11 +168,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -798,7 +796,7 @@ mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
vertical-align: baseline;
}
blockquote {
@ -984,6 +982,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1084,6 +1083,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
@ -1278,6 +1278,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
}
@ -1398,25 +1399,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1629,14 +1643,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1664,12 +1679,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1737,7 +1754,7 @@ code em {
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: middle;
vertical-align: baseline;
}
/**

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

75
css/pico.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -23,6 +23,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -172,11 +173,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -798,13 +801,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical);
}
hgroup {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
}
hgroup > * {
hgroup > *,
.headings > * {
margin-bottom: 0;
}
hgroup > *:last-child {
hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
@ -841,7 +847,7 @@ mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
vertical-align: baseline;
}
blockquote {
@ -1163,6 +1169,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1263,6 +1270,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
@ -1457,6 +1465,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
}
@ -1577,25 +1586,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1808,14 +1830,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1843,12 +1866,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1916,7 +1941,7 @@ code em {
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: middle;
vertical-align: baseline;
}
/**

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

71
css/pico.fluid.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/
/**
@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -120,9 +119,6 @@ dialog > article {
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
small {
--font-size: 0.875em;
@ -172,11 +168,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -768,7 +766,7 @@ mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
vertical-align: baseline;
}
blockquote {
@ -954,6 +952,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1054,6 +1053,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
@ -1248,6 +1248,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
}
@ -1368,25 +1369,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5);
}
:not([dir=rtl]) [type=date],
:not([dir=rtl]) [type=datetime-local],
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
background-image: var(--icon-time);
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
opacity: 0;
}
:not([dir=rtl]) [type=time] {
background-image: var(--icon-time);
[dir=rtl] [type=date],
[dir=rtl] [type=datetime-local],
[dir=rtl] [type=month],
[dir=rtl] [type=time],
[dir=rtl] [type=week] {
text-align: right;
}
[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
display: none;
}
[type=file] {
@ -1599,14 +1613,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25);
}
[type=search] {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
@ -1634,12 +1649,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**
@ -1707,7 +1724,7 @@ code em {
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: middle;
vertical-align: baseline;
}
/**

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

30
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example
@ -26,6 +26,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -104,11 +105,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}
@ -727,13 +730,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical);
}
hgroup {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
}
hgroup > * {
hgroup > *,
.headings > * {
margin-bottom: 0;
}
hgroup > *:last-child {
hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
@ -770,7 +776,7 @@ mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
vertical-align: baseline;
}
blockquote {
@ -1091,6 +1097,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1191,6 +1198,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),
@ -1387,12 +1395,14 @@ td {
text-align: start;
}
tr {
background-color: var(--background-color);
tfoot th,
tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
/**

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

7
css/themes/default.css
View file

@ -19,6 +19,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -168,11 +169,13 @@ h5 {
}
thead th,
thead td {
thead td,
tfoot th,
tfoot td {
--border-width: 3px;
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

6
docs/css/pico.docs.css
View file

@ -90,14 +90,13 @@ svg {
*/
main > aside nav {
width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2);
padding-bottom: var(--block-spacing-vertical);
}
@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;
}
@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
display: none;
}
}
main > aside nav.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
display: none;
}

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

19
docs/forms.html
View file

@ -27,7 +27,7 @@
&lt;/<b>form</b>&gt;</code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre></footer></article><p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> Publish on my profile my accomplishments</label></fieldset><footer class="code"><pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
@ -49,22 +49,35 @@
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
Extra Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em>
<em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
I agree to the Terms and Conditions
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
I agree to share my information with partners
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em>
<em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
Publish on my profile
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
Publish on my profile my accomplishments
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre></footer></article><p>Others input types:</p><article aria-label="File browser, range slider, date, time, color examples"><label for="file">File browser <input type="file" id="file" name="file"></label> <label for="range">Range slider <input type="range" min="0" max="100" value="50" id="range" name="range"></label> <label for="date">Date <input type="date" id="date" name="date"></label> <label for="time">Time <input type="time" id="time" name="time"></label> <label for="color">Color <input type="color" id="color" name="color" value="#0eaaaa"></label><footer class="code"><pre><code><em>&lt;!-- File browser --&gt;</em>

8
docs/modal.html
View file

@ -27,7 +27,7 @@
&lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal
&lt;/<b>button</b>&gt;
@ -38,7 +38,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt;
@ -51,13 +51,13 @@
<i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel
&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm
&lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt;

4
docs/scss/layout/_aside.scss
View file

@ -6,13 +6,12 @@ main > aside {
nav {
width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2);
padding-bottom: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
@ -35,7 +34,6 @@ main > aside {
}
&.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
a#toggle-docs-navigation {
svg.collapse {

2
docs/src/containers.html
View file

@ -62,7 +62,7 @@
</table>
</figure>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
<p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
<p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section>
${require('./_footer.html')}

29
docs/src/forms.html
View file

@ -114,18 +114,30 @@
<input type="radio" id="large" name="size" value="large">
Large
</label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset>
<fieldset>
<label for="terms">
<input type="checkbox" id="terms" name="terms">
I agree to the Terms and Conditions
</label>
<label for="terms_sharing">
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
I agree to share my information with partners
</label>
</fieldset>
<fieldset>
<label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile
</label>
<label for="switch_disabled">
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
Publish on my profile my accomplishments
</label>
</fieldset>
<footer class="code">
@ -151,22 +163,35 @@
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
Extra Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em>
<em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
I agree to the Terms and Conditions
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
I agree to share my information with partners
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em>
<em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
Publish on my profile
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
Publish on my profile my accomplishments
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre>
</footer>

8
docs/src/modal.html
View file

@ -98,7 +98,7 @@
<pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal
&lt;/<b>button</b>&gt;
@ -109,7 +109,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt;
@ -122,13 +122,13 @@
<i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel
&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm
&lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt;

20
docs/src/tables.html
View file

@ -58,6 +58,16 @@
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">#</th>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
</tfoot>
</table>
</figure>
@ -98,6 +108,16 @@
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tbody</b>&gt;
&lt;<b>tfoot</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tfoot</b>&gt;
&lt;/<b>table</b>&gt;</code></pre>
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>

75
docs/src/typography.html
View file

@ -1,24 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html')
title="Typography"
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
canonical="typography.html"
}
${require('./_head.html') title="Typography" description="All typographic
elements are responsive, allowing text to scale gracefully across devices
and viewports." canonical="typography.html" }
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="typography-link"}
<div role="document">
<section id="typography">
<hgroup>
<h1>Typography</h1>
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
<h2>
All typographic elements are responsive, allowing text to scale
gracefully across devices and viewports.
</h2>
</hgroup>
<figure>
<table role="grid">
@ -109,38 +110,48 @@
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<footer class="code">
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer>
</article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<p>
Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
<code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
<code><i>margin-bottom</i></code> are collapsed and the
<code>:last-child</code> is muted.
</p>
<article aria-label="Hgroup example">
<hgroup>
<div class="headings">
<h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3>
</hgroup>
</div>
<footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer>
</article>
<p>Inline text elements:</p>
<article aria-label="Inline text examples">
<div class="grid">
<div>
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
<p>
<em>Italic</em> <code>i</code> <code>em</code>
<code>cite</code>
</p>
<p><del>Deleted</del> <code>del</code></p>
<p><ins>Inserted</ins> <code>ins</code></p>
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@ -155,44 +166,46 @@
</div>
</div>
</article>
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<p>
Links come with <code>.secondary</code> and
<code>.contrast</code> styles.
</p>
<article aria-label="Links examples">
<a href="#" onclick="event.preventDefault()">Primary</a><br>
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
<a href="#" onclick="event.preventDefault()">Primary</a><br />
<a href="#" onclick="event.preventDefault()" class="secondary"
>Secondary</a
><br />
<a href="#" onclick="event.preventDefault()" class="contrast"
>Contrast</a
><br />
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
<p>Blockquote:</p>
<article aria-label="Blockquote example">
<blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit
non. Nam at dui sit amet ipsum cursus ornare."
<footer>
<cite>- Phasellus eget lacinia</cite>
</footer>
</blockquote>
<footer class="code">
<pre><code>&lt;<b>blockquote</b>&gt;
<pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>

12
docs/tables.html
View file

File diff suppressed because one or more lines are too long

11
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2038
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.4.2",
"version": "1.4.3",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
@ -100,4 +100,4 @@
"last 2 major versions",
"not dead"
]
}
}

3
scss/_variables.scss
View file

@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
// .classless version if disabled
$enable-classes: true !default;
// Enable .grid class
$enable-grid: true !default;
// Enable transitions
$enable-transitions: true !default;

19
scss/content/_button.scss
View file

@ -195,13 +195,12 @@ input[type="reset"] {
}
// Button [disabled]
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: 0.5;
pointer-events: none;
}
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"]:not([href]),
a[role="button"][disabled] {
opacity: 0.5;
pointer-events: none;
}

2
scss/content/_code.scss
View file

@ -87,5 +87,5 @@ code {
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: middle;
vertical-align: baseline;
}

61
scss/content/_form-alt-input-types.scss
View file

@ -34,26 +34,49 @@
}
// Date & Time
:not([dir="rtl"]) {
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="date"],
&[type="datetime-local"],
&[type="month"],
&[type="time"],
&[type="week"] {
padding-right: calc(1.75rem + var(--spacing) * 0.5);
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(--icon-time);
}
}
// Calendar picker
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
[dir="rtl"] {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
text-align: right;
&::-webkit-calendar-picker-indicator {
opacity: 0;
display: none;
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
}
}
// File
@ -213,20 +236,20 @@
}
// Search
[type="search"] {
border-radius: 5rem;
@if $enable-important {
padding-left: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
&[type="search"] {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
}
// Cancel button
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;

1
scss/content/_form-checkbox-radio.scss
View file

@ -16,6 +16,7 @@
margin-inline-start: 0;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;

1
scss/content/_form.scss
View file

@ -129,6 +129,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
// Blocks, 100%

12
scss/content/_table.scss
View file

@ -33,16 +33,20 @@ td {
text-align: start;
}
// Rows
tr {
background-color: var(--background-color);
// Footer
tfoot {
th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
}
// Striped
table {
&[role="grid"] {
tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
background-color: var(--table-row-stripped-background-color);
}
}
}

40
scss/content/_typography.scss
View file

@ -181,18 +181,38 @@ ul {
}
// Heading group
hgroup {
margin-bottom: var(--typography-spacing-vertical);
@if $enable-classes == false {
hgroup {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
@if $enable-classes {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
@ -228,7 +248,7 @@ mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
vertical-align: baseline;
}
// Blockquote

2
scss/layout/_grid.scss
View file

@ -1,4 +1,4 @@
@if $enable-classes {
@if ($enable-classes and $enable-grid) {
/**
* Grid
* Minimal grid system with auto-layout columns

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*/

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.4.2 (https://picocss.com)
* Pico.css v1.4.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
*
* Slim version example

23
scss/themes/default/_styles.scss
View file

@ -50,14 +50,18 @@
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
// Spacings .grid
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
@if ($enable-classes and $enable-grid) {
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
}
// Spacings for form elements and button
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight);
// Transitions
--transition: 0.2s ease-in-out;
}
@ -148,9 +152,11 @@ a {
--text-decoration: none;
// Secondary & Contrast
&.secondary,
&.contrast {
--text-decoration: underline;
@if $enable-classes {
&.secondary,
&.contrast {
--text-decoration: underline;
}
}
}
@ -205,14 +211,15 @@ h5 {
}
// Table
thead {
thead,
tfoot {
th,
td {
--border-width: 3px;
}
}
:not(thead) > * > td {
:not(thead):not(tfoot) > * > td {
--font-size: 0.875em;
}