mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06: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

11
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. No dependencies, package manager, external files, or JavaScript.
**Responsive everything** **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** **Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference. 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) - [Usage](#usage)
- [Class-less version](#class-less-version) - [Class-less version](#class-less-version)
- [Examples](#examples) - [Examples](#examples)
- [Limitations](#limitations)
- [Documentation](#documentation) - [Documentation](#documentation)
- [Contributing](#contributing) - [Contributing](#contributing)
- [Copyright and license](#copyright-and-license) - [Copyright and license](#copyright-and-license)
@ -70,9 +71,9 @@ npm install @picocss/pico
## Class-less version ## 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: 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). 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 ## Documentation
**Getting started** **Getting started**

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 * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem; --typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -120,9 +119,6 @@ dialog > article {
a { a {
--text-decoration: none; --text-decoration: none;
} }
a.secondary, a.contrast {
--text-decoration: underline;
}
small { small {
--font-size: 0.875em; --font-size: 0.875em;
@ -172,11 +168,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -798,7 +796,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -984,6 +982,7 @@ button[disabled],
input[type=submit][disabled], input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] { a[role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -1084,6 +1083,7 @@ label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox]):not([type=radio]),
@ -1278,6 +1278,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@ -1398,25 +1399,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
:not([dir=rtl]) [type=date], 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] {
:not([dir=rtl]) [type=datetime-local], padding-right: calc(1.75rem + var(--spacing) * 0.5);
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator, background-image: var(--icon-time);
: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 { [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; 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] { [type=file] {
@ -1629,14 +1643,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25); 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; border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[type=search]::-webkit-search-cancel-button { [type=search]::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
@ -1664,12 +1679,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { 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 { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-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 * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -23,6 +23,7 @@
--grid-spacing-horizontal: var(--spacing); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -172,11 +173,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -798,13 +801,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;
@ -841,7 +847,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -1163,6 +1169,7 @@ button[disabled],
input[type=submit][disabled], input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] { a[role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -1263,6 +1270,7 @@ label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox]):not([type=radio]),
@ -1457,6 +1465,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@ -1577,25 +1586,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
:not([dir=rtl]) [type=date], 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] {
:not([dir=rtl]) [type=datetime-local], padding-right: calc(1.75rem + var(--spacing) * 0.5);
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator, background-image: var(--icon-time);
: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 { [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; 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] { [type=file] {
@ -1808,14 +1830,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25); 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; border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[type=search]::-webkit-search-cancel-button { [type=search]::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
@ -1843,12 +1866,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { 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 { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-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 * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem; --typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -120,9 +119,6 @@ dialog > article {
a { a {
--text-decoration: none; --text-decoration: none;
} }
a.secondary, a.contrast {
--text-decoration: underline;
}
small { small {
--font-size: 0.875em; --font-size: 0.875em;
@ -172,11 +168,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -768,7 +766,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -954,6 +952,7 @@ button[disabled],
input[type=submit][disabled], input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] { a[role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -1054,6 +1053,7 @@ label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox]):not([type=radio]),
@ -1248,6 +1248,7 @@ label > input, label > select, label > textarea {
-webkit-margin-end: 0.375em; -webkit-margin-end: 0.375em;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(--border-width);
font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@ -1368,25 +1369,38 @@ label > input, label > select, label > textarea {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
:not([dir=rtl]) [type=date], 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] {
:not([dir=rtl]) [type=datetime-local], padding-right: calc(1.75rem + var(--spacing) * 0.5);
:not([dir=rtl]) [type=month],
:not([dir=rtl]) [type=time],
:not([dir=rtl]) [type=week] {
background-image: var(--icon-date); background-image: var(--icon-date);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator, background-image: var(--icon-time);
: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 { [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; 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] { [type=file] {
@ -1599,14 +1613,15 @@ label > input, label > select, label > textarea {
transform: scale(1.25); 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; border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[type=search]::-webkit-search-cancel-button { [type=search]::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
@ -1634,12 +1649,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { 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 { kbd {
background-color: var(--code-kbd-background-color); background-color: var(--code-kbd-background-color);
color: var(--code-kbd-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 * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example
@ -26,6 +26,7 @@
--grid-spacing-horizontal: var(--spacing); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -104,11 +105,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -727,13 +730,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical); margin-top: var(--typography-spacing-vertical);
} }
hgroup { hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
} }
hgroup > * { hgroup > *,
.headings > * {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup > *:last-child { hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color); --color: var(--muted-color);
--font-weight: unset; --font-weight: unset;
font-size: 1rem; font-size: 1rem;
@ -770,7 +776,7 @@ mark {
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
blockquote { blockquote {
@ -1091,6 +1097,7 @@ button[disabled],
input[type=submit][disabled], input[type=submit][disabled],
input[type=button][disabled], input[type=button][disabled],
input[type=reset][disabled], input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] { a[role=button][disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -1191,6 +1198,7 @@ label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--spacing) * 0.25); margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox]):not([type=radio]),
@ -1387,12 +1395,14 @@ td {
text-align: start; text-align: start;
} }
tr { tfoot th,
background-color: var(--background-color); tfoot td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
} }
table[role=grid] tbody tr:nth-child(odd) { 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); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -168,11 +169,13 @@ h5 {
} }
thead th, thead th,
thead td { thead td,
tfoot th,
tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead) > * > td { :not(thead):not(tfoot) > * > td {
--font-size: 0.875em; --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 { main > aside nav {
width: 100%; width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2); padding-bottom: var(--block-spacing-vertical);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
main > aside nav { main > aside nav {
position: fixed; position: fixed;
width: 200px; width: 200px;
max-height: calc(100vh - 5.5rem); max-height: calc(100vh - 5.5rem);
margin-bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@ -118,9 +117,6 @@ main > aside nav a#toggle-docs-navigation svg {
display: none; 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 { main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
display: none; 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>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>"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>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>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>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; &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; &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 Large
&lt;/<b>label</b>&gt; &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; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em> <em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&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; &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 I agree to the Terms and Conditions
&lt;/<b>label</b>&gt; &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; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em> <em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&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; &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 Publish on my profile
&lt;/<b>label</b>&gt; &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; &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>; <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> &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>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> &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</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 Launch demo modal
&lt;/<b>button</b>&gt; &lt;/<b>button</b>&gt;
@ -38,7 +38,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt; <i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u> <i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</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>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt; &lt;<b>p</b>&gt;
@ -51,13 +51,13 @@
<i>role</i>=<u>"button"</u>&gt; <i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u> <i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</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 Cancel
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u> &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u> <i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</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 Confirm
&lt;/<b>a</b>&gt; &lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt; &lt;/<b>footer</b>&gt;

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

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

2
docs/src/containers.html
View file

@ -62,7 +62,7 @@
</table> </table>
</figure> </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>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> </section>
${require('./_footer.html')} ${require('./_footer.html')}

29
docs/src/forms.html
View file

@ -114,18 +114,30 @@
<input type="radio" id="large" name="size" value="large"> <input type="radio" id="large" name="size" value="large">
Large Large
</label> </label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="terms"> <label for="terms">
<input type="checkbox" id="terms" name="terms"> <input type="checkbox" id="terms" name="terms">
I agree to the Terms and Conditions I agree to the Terms and Conditions
</label> </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>
<fieldset> <fieldset>
<label for="switch"> <label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch"> <input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile Publish on my profile
</label> </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> </fieldset>
<footer class="code"> <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; &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 Large
&lt;/<b>label</b>&gt; &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; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em> <em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&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; &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 I agree to the Terms and Conditions
&lt;/<b>label</b>&gt; &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; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em> <em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&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; &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 Publish on my profile
&lt;/<b>label</b>&gt; &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> &lt;/<b>fieldset</b>&gt;</code></pre>
</footer> </footer>

8
docs/src/modal.html
View file

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

20
docs/src/tables.html
View file

@ -58,6 +58,16 @@
<td>Cell</td> <td>Cell</td>
</tr> </tr>
</tbody> </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> </table>
</figure> </figure>
@ -98,6 +108,16 @@
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt; &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt; &lt;/<b>tr</b>&gt;
&lt;/<b>tbody</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> &lt;/<b>table</b>&gt;</code></pre>
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p> <p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>

71
docs/src/typography.html
View file

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

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.4.2", "version": "1.4.3",
"description": "Minimal CSS Framework for semantic HTML", "description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "css/pico.min.css",

3
scss/_variables.scss
View file

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

17
scss/content/_button.scss
View file

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

2
scss/content/_code.scss
View file

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

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

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

1
scss/content/_form.scss
View file

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

12
scss/content/_table.scss
View file

@ -33,16 +33,20 @@ td {
text-align: start; text-align: start;
} }
// Rows // Footer
tr { tfoot {
background-color: var(--background-color); th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
} }
// Striped // Striped
table { table {
&[role="grid"] { &[role="grid"] {
tbody tr:nth-child(odd) { 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 // Heading group
hgroup { @if $enable-classes == false {
margin-bottom: var(--typography-spacing-vertical); 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 { @if $enable-classes {
--color: var(--muted-color); hgroup,
--font-weight: unset; .headings {
font-size: 1rem; margin-bottom: var(--typography-spacing-vertical);
font-family: unset;
> * {
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; padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color); background-color: var(--mark-background-color);
color: var(--mark-color); color: var(--mark-color);
vertical-align: middle; vertical-align: baseline;
} }
// Blockquote // Blockquote

2
scss/layout/_grid.scss
View file

@ -1,4 +1,4 @@
@if $enable-classes { @if ($enable-classes and $enable-grid) {
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * 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 * 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 * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example

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

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