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

Merge branch 'dev' into feat/nav_breadcrumb

Browse source
This commit is contained in:
Jelmer Veen 2022-06-12 12:47:30 +02:00 • committed by GitHub
commit 7354c7f347
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
105 changed files with 4323 additions and 2904 deletions
Download patch file Download diff file Expand all files Collapse all files

22
.github/CONTRIBUTING.md vendored Normal file
View file

@ -0,0 +1,22 @@
# Contributing to Pico
Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls).
## Bug reports
The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/new?category=help) instead.
- Please do not use the issue tracker for feature requests. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas) instead.
## Pull requests
Good pull requests, patches, improvements, and new features are a fantastic help.
**Please ask first before starting work on any significant new features.**
We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas).
[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`.
Do not edit [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`.

21
.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View file

@ -0,0 +1,21 @@
---
name: Bug report
about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Pico CSS.
---
Please search for duplicate or closed issues first.
## Describe the issue
### Current Behavior
A concise description of the bug.
### Expected Behavior
A concise description of what you expected.
### Reproduction URL
We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
### Environment
Example: OS, versions, browser details.

8
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -0,0 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Get Help
url: https://github.com/picocss/pico/discussions/discussions/new?category=help
about: If you can't get something to work the way you expect, open a question in our discussion forums.
- name: Feature Request
url: https://github.com/picocss/pico/discussions/discussions/new?category=ideas
about: Suggest any ideas you have using our discussion forums.

2
.gitignore vendored
View file

@ -2,4 +2,4 @@ node_modules/
tests/
.nvmrc
.prettierrc.js
*.DS_Store
*.DS_Store

2
LICENSE.md
View file

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2019-2021 Pico
Copyright (c) 2019-2022 Pico
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

22
README.md
View file

@ -14,10 +14,12 @@
</p>
## Pico.css
[![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
[![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css)
[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
@ -40,12 +42,13 @@ Shipped with two beautiful color themes, automatically enabled according to the
- [Examples](#examples)
- [Limitations](#limitations)
- [Documentation](#documentation)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
## Usage
There are 3 ways to get started with pico.css:
There are 4 ways to get started with pico.css:
**Install manually**
@ -69,6 +72,12 @@ Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/)
npm install @picocss/pico
```
**Install with Composer**
```shell
composer require picocss/pico
```
## Class-less version
Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
@ -162,6 +171,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
**Components**
- [Accordions](https://picocss.com/docs/accordions.html)
- [Cards](https://picocss.com/docs/cards.html)
- [Dropdowns](https://picocss.com/docs/dropdowns.html)
- [Modal](https://picocss.com/docs/modal.html)
- [Navs](https://picocss.com/docs/navs.html)
- [Progress](https://picocss.com/docs/progress.html)
@ -170,11 +180,13 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
- [Loading](https://picocss.com/docs/loading.html)
- [Tooltips](https://picocss.com/docs/tooltips.html)
## Browser Support
Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
## Contributing
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly. Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`.
- Do not edit [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`.
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
## Copyright and license

30
composer.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "picocss/pico",
"description": "Minimal CSS Framework for semantic HTML.",
"keywords": [
"css",
"css-framework",
"dark-mode",
"dark-theme",
"lightweight",
"minimal",
"minimalist",
"minimalistic",
"native-html",
"scss-framework",
"semantic"
],
"homepage": "https://picocss.com",
"authors": [
{
"name": "Lucas Larroche",
"email": "lucas@larroche.com",
"homepage": "https://lucaslarroche.com",
"role": "Developer"
}
],
"support": {
"issues": "https://github.com/picocss/pico/issues/"
},
"license": "MIT"
}

697
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

10
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

849
css/pico.css
View file

File diff suppressed because it is too large Load diff

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

9
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

9
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

526
css/pico.slim.css
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
* Pico.css v1.5.2 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
@ -26,6 +26,10 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@ -131,24 +135,24 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%);
--h2-color: #24333e;
--h3-color: #2c3d49;
--h3-color: hsl(205deg, 25%, 23%);
--h4-color: #374956;
--h5-color: #415462;
--h5-color: hsl(205deg, 20%, 32%);
--h6-color: #4d606d;
--muted-color: #73828c;
--muted-border-color: #edf0f3;
--primary: #1095c1;
--primary-hover: #08769b;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: hsl(205deg, 20%, 94%);
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 90%, 32%);
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 20%, 32%);
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast: hsl(205deg, 30%, 15%);
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #fff;
@ -161,14 +165,14 @@ kbd {
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent;
--form-element-border-color: #a2afb9;
--form-element-border-color: hsl(205deg, 14%, 68%);
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #d32f2f;
@ -176,42 +180,54 @@ kbd {
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #43a047;
--form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--switch-background-color: #bbc6ce;
--switch-background-color: hsl(205deg, 16%, 77%);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #d5dce2;
--range-active-border-color: #bbc6ce;
--range-border-color: hsl(205deg, 18%, 86%);
--range-active-border-color: hsl(205deg, 16%, 77%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-background-color: hsl(205deg, 20%, 94%);
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #b34d80;
--code-property-color: #3d888f;
--code-value-color: #998866;
--code-comment-color: #a2afb9;
--code-tag-color: hsl(330deg, 40%, 50%);
--code-property-color: hsl(185deg, 40%, 40%);
--code-value-color: hsl(40deg, 20%, 50%);
--code-comment-color: hsl(205deg, 14%, 68%);
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@ -225,24 +241,24 @@ kbd {
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h3-color: hsl(205deg, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h5-color: hsl(205deg, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast: hsl(205deg, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
@ -261,8 +277,8 @@ kbd {
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
@ -274,7 +290,7 @@ kbd {
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-active-border-color: hsl(205deg, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
@ -285,20 +301,30 @@ kbd {
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-tag-color: hsl(330deg, 30%, 50%);
--code-property-color: hsl(185deg, 30%, 50%);
--code-value-color: hsl(40deg, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-border-color: var(--card-background-color);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -307,6 +333,8 @@ kbd {
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@ -319,24 +347,24 @@ kbd {
}
[data-theme=dark] {
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h3-color: hsl(205deg, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h5-color: hsl(205deg, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast: hsl(205deg, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
@ -355,8 +383,8 @@ kbd {
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
@ -368,7 +396,7 @@ kbd {
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-active-border-color: hsl(205deg, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
@ -379,20 +407,30 @@ kbd {
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-tag-color: hsl(330deg, 30%, 50%);
--code-property-color: hsl(185deg, 30%, 50%);
--code-value-color: hsl(40deg, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-border-color: var(--card-background-color);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -401,6 +439,8 @@ kbd {
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@ -419,6 +459,7 @@ kbd {
*::before,
*::after {
box-sizing: border-box;
background-repeat: no-repeat;
}
::before,
@ -427,10 +468,11 @@ kbd {
vertical-align: inherit;
}
html {
:where(:root) {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
text-rendering: optimizeLegibility;
background-color: var(--background-color);
color: var(--color);
@ -438,6 +480,7 @@ html {
font-size: var(--font-size);
line-height: var(--line-height);
font-family: var(--font-family);
overflow-wrap: break-word;
cursor: default;
-moz-tab-size: 4;
-o-tab-size: 4;
@ -566,21 +609,6 @@ sup {
top: -0.5em;
}
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
margin: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin: 0;
}
address,
blockquote,
dl,
@ -599,7 +627,8 @@ ul {
font-size: var(--font-size);
}
a {
a,
[role=link] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -608,29 +637,37 @@ a {
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
}
a:hover, a:active, a:focus {
a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
a:focus,
[role=link]:focus {
--background-color: var(--primary-focus);
}
a.secondary {
a.secondary,
[role=link].secondary {
--color: var(--secondary);
}
a.secondary:hover, a.secondary:active, a.secondary:focus {
a.secondary:is([aria-current], :hover, :active, :focus),
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
a.secondary:focus {
a.secondary:focus,
[role=link].secondary:focus {
--background-color: var(--secondary-focus);
}
a.contrast {
a.contrast,
[role=link].contrast {
--color: var(--contrast);
}
a.contrast:hover, a.contrast:active, a.contrast:focus {
a.contrast:is([aria-current], :hover, :active, :focus),
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
a.contrast:focus {
a.contrast:focus,
[role=link].contrast:focus {
--background-color: var(--contrast-focus);
}
@ -672,61 +709,7 @@ h6 {
--color: var(--h6-color);
}
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
blockquote ~ h1,
blockquote ~ h2,
blockquote ~ h3,
blockquote ~ h4,
blockquote ~ h5,
blockquote ~ h6,
dl ~ h1,
dl ~ h2,
dl ~ h3,
dl ~ h4,
dl ~ h5,
dl ~ h6,
figure ~ h1,
figure ~ h2,
figure ~ h3,
figure ~ h4,
figure ~ h5,
figure ~ h6,
form ~ h1,
form ~ h2,
form ~ h3,
form ~ h4,
form ~ h5,
form ~ h6,
ol ~ h1,
ol ~ h2,
ol ~ h3,
ol ~ h4,
ol ~ h5,
ol ~ h6,
p ~ h1,
p ~ h2,
p ~ h3,
p ~ h4,
p ~ h5,
p ~ h6,
pre ~ h1,
pre ~ h2,
pre ~ h3,
pre ~ h4,
pre ~ h5,
pre ~ h6,
table ~ h1,
table ~ h2,
table ~ h3,
table ~ h4,
table ~ h5,
table ~ h6,
ul ~ h1,
ul ~ h2,
ul ~ h3,
ul ~ h4,
ul ~ h5,
ul ~ h6 {
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
}
@ -754,8 +737,7 @@ small {
font-size: var(--font-size);
}
ul,
ol {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
@ -763,11 +745,15 @@ ol {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
ul li,
ol li {
:where(dl, ol, ul) li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}
:where(dl, ol, ul) :is(dl, ol, ul) {
margin: 0;
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}
ul li {
list-style: square;
}
@ -821,12 +807,7 @@ del {
/**
* Embedded content
*/
audio,
canvas,
iframe,
img,
svg,
video {
:where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
@ -840,7 +821,7 @@ audio:not([controls]) {
height: 0;
}
iframe {
:where(iframe) {
border-style: none;
}
@ -850,7 +831,7 @@ img {
border-style: none;
}
svg:not([fill]) {
:where(svg:not([fill])) {
fill: currentColor;
}
@ -875,14 +856,6 @@ button,
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button {
display: block;
width: 100%;
@ -916,19 +889,11 @@ input[type=reset],
text-align: center;
cursor: pointer;
}
button:hover, button:active, button:focus,
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button]:hover,
[role=button]:active,
[role=button]:focus {
button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -943,154 +908,70 @@ input[type=reset]:focus,
0 0 0 var(--outline-width) var(--primary-focus);
}
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
:is(button, input[type=submit], input[type=button], [role=button]).secondary,
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
input[type=submit].secondary:hover,
input[type=submit].secondary:active,
input[type=submit].secondary:focus,
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
[role=button].secondary:hover,
[role=button].secondary:active,
[role=button].secondary:focus {
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
button.secondary:focus,
input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset]:focus,
[role=button].secondary:focus {
:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
:is(button, input[type=submit], input[type=button], [role=button]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
input[type=submit].contrast:hover,
input[type=submit].contrast:active,
input[type=submit].contrast:focus,
input[type=button].contrast:hover,
input[type=button].contrast:active,
input[type=button].contrast:focus,
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
[role=button].contrast:hover,
[role=button].contrast:active,
[role=button].contrast:focus {
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
button.contrast:focus,
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
[role=button].contrast:focus {
:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
:is(button, input[type=submit], input[type=button], [role=button]).outline,
input[type=reset].outline {
--background-color: transparent;
--color: var(--primary);
}
button.outline:hover, button.outline:active, button.outline:focus,
input[type=submit].outline:hover,
input[type=submit].outline:active,
input[type=submit].outline:focus,
input[type=button].outline:hover,
input[type=button].outline:active,
input[type=button].outline:focus,
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
[role=button].outline:hover,
[role=button].outline:active,
[role=button].outline:focus {
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
}
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
input[type=reset].outline {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input[type=submit].outline.secondary:hover,
input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
[role=button].outline.secondary:hover,
[role=button].outline.secondary:active,
[role=button].outline.secondary:focus {
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
button.outline.contrast,
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
[role=button].outline.contrast {
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input[type=submit].outline.contrast:hover,
input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
[role=button].outline.contrast:hover,
[role=button].outline.contrast:active,
[role=button].outline.contrast:focus {
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
[role=button][disabled] {
:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
opacity: 0.5;
pointer-events: none;
}
@ -1225,19 +1106,13 @@ textarea {
font-weight: var(--font-weight);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
@ -1249,15 +1124,15 @@ textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1268,50 +1143,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
:where(input, select, textarea)[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
:where(input, select, textarea)[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-position: center left 0.75rem;
}
@ -1351,9 +1204,7 @@ select:not([multiple]):not([size]) {
background-position: center left 0.75rem;
}
input + small,
select + small,
textarea + small {
:where(input, select, textarea) + small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
@ -1361,16 +1212,15 @@ textarea + small {
color: var(--muted-color);
}
label > input, label > select, label > textarea {
label > :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}
/**
* Table
*/
table {
:where(table) {
width: 100%;
border-color: inherit;
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;

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

File diff suppressed because one or more lines are too long

7
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

172
css/themes/default.css
View file

@ -19,6 +19,10 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@ -195,24 +199,24 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%);
--h2-color: #24333e;
--h3-color: #2c3d49;
--h3-color: hsl(205deg, 25%, 23%);
--h4-color: #374956;
--h5-color: #415462;
--h5-color: hsl(205deg, 20%, 32%);
--h6-color: #4d606d;
--muted-color: #73828c;
--muted-border-color: #edf0f3;
--primary: #1095c1;
--primary-hover: #08769b;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: hsl(205deg, 20%, 94%);
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 90%, 32%);
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 20%, 32%);
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast: hsl(205deg, 30%, 15%);
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #fff;
@ -225,14 +229,14 @@ kbd {
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent;
--form-element-border-color: #a2afb9;
--form-element-border-color: hsl(205deg, 14%, 68%);
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #d32f2f;
@ -240,42 +244,54 @@ kbd {
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #43a047;
--form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--switch-background-color: #bbc6ce;
--switch-background-color: hsl(205deg, 16%, 77%);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #d5dce2;
--range-active-border-color: #bbc6ce;
--range-border-color: hsl(205deg, 18%, 86%);
--range-active-border-color: hsl(205deg, 16%, 77%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-background-color: hsl(205deg, 20%, 94%);
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #b34d80;
--code-property-color: #3d888f;
--code-value-color: #998866;
--code-comment-color: #a2afb9;
--code-tag-color: hsl(330deg, 40%, 50%);
--code-property-color: hsl(185deg, 40%, 40%);
--code-value-color: hsl(40deg, 20%, 50%);
--code-comment-color: hsl(205deg, 14%, 68%);
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@ -289,24 +305,24 @@ kbd {
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h3-color: hsl(205deg, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h5-color: hsl(205deg, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast: hsl(205deg, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
@ -325,8 +341,8 @@ kbd {
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
@ -338,7 +354,7 @@ kbd {
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-active-border-color: hsl(205deg, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
@ -349,20 +365,30 @@ kbd {
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-tag-color: hsl(330deg, 30%, 50%);
--code-property-color: hsl(185deg, 30%, 50%);
--code-value-color: hsl(40deg, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-border-color: var(--card-background-color);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -371,6 +397,8 @@ kbd {
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@ -383,24 +411,24 @@ kbd {
}
[data-theme=dark] {
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h3-color: hsl(205deg, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h5-color: hsl(205deg, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-color: hsl(205deg, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary: hsl(195deg, 85%, 41%);
--primary-hover: hsl(195deg, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary: hsl(205deg, 15%, 41%);
--secondary-hover: hsl(205deg, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast: hsl(205deg, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
@ -419,8 +447,8 @@ kbd {
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
@ -432,7 +460,7 @@ kbd {
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-active-border-color: hsl(205deg, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
@ -443,20 +471,30 @@ kbd {
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-tag-color: hsl(330deg, 30%, 50%);
--code-property-color: hsl(185deg, 30%, 50%);
--code-value-color: hsl(40deg, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-border-color: var(--card-background-color);
--card-box-shadow:
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -465,6 +503,8 @@ kbd {
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

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

File diff suppressed because one or more lines are too long

3
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

26
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

4
docs/buttons.html
View file

File diff suppressed because one or more lines are too long

2
docs/cards.html
View file

File diff suppressed because one or more lines are too long

2
docs/classless.html
View file

File diff suppressed because one or more lines are too long

4
docs/containers.html
View file

File diff suppressed because one or more lines are too long

46
docs/css/pico.docs.css
View file

@ -102,6 +102,7 @@ main > aside nav {
}
}
main > aside nav a#toggle-docs-navigation {
display: block;
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
@ -134,14 +135,24 @@ main > aside nav.closed-on-mobile details {
main > aside nav.open a#toggle-docs-navigation svg.expand {
display: none;
}
main > aside details {
padding-bottom: 0;
}
main > aside details summary {
padding-bottom: 0.5rem;
}
main > aside li,
main > aside summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
main > aside ul {
padding-left: 0.25rem;
}
main > aside li a {
padding: 0.375rem 0.5rem;
--nav-link-spacing-vertical: 0.25rem;
--nav-link-spacing-horizontal: 0.75rem;
}
main > aside li a svg {
vertical-align: middle;
@ -150,8 +161,8 @@ main > aside a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
main > aside a.active,
main > aside a.active:hover {
main > aside a[aria-current],
main > aside a[aria-current]:hover {
color: var(--primary);
}
main > aside details {
@ -167,9 +178,9 @@ main > aside details summary::after {
display: none;
}
main > aside details[open] > summary {
margin-bottom: calc(var(--spacing) * 0.75);
margin-bottom: 0;
}
main > aside details[open] > summary:not(:focus) {
main > aside details[open] > summary:not([role=button]):not(:focus) {
color: var(--h1-color);
}
@ -266,6 +277,10 @@ main > aside details[open] > summary:not(:focus) {
vertical-align: bottom;
}
#buttons a[role=button] {
margin-right: calc(var(--spacing) * 0.5);
}
#forms div.grid {
grid-row-gap: 0;
}
@ -285,11 +300,6 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] section > h1,
[role=document] section > h2,
[role=document] section > h3 {
@ -390,6 +400,7 @@ dialog.example:not([open]), dialog.example[open=false] {
* Docs: Navs
*/
body > nav {
--nav-link-spacing-vertical: 1rem;
-webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 99;
position: fixed;
@ -409,20 +420,27 @@ body > nav a {
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
body > nav ul:first-of-type {
margin-left: calc(var(--spacing) * -1);
}
body > nav ul:first-of-type li {
padding: 0;
}
body > nav ul:first-of-type li:first-of-type a {
display: block;
margin: 0;
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
margin-left: calc(var(--spacing) * 1.5);
color: var(--h1-color);
}
@media (min-width: 992px) {

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

2
docs/customization.html
View file

File diff suppressed because one or more lines are too long

157
docs/dropdowns.html Normal file
View file

File diff suppressed because one or more lines are too long

7
docs/forms.html
View file

File diff suppressed because one or more lines are too long

2
docs/grid.html
View file

File diff suppressed because one or more lines are too long

2
docs/index.html
View file

File diff suppressed because one or more lines are too long

2
docs/js/commons.js
View file

@ -2,7 +2,7 @@
* Add some magic to Pico docs
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
// Imports

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

@ -1 +1 @@
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
"use strict";!function(){const e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){let t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme);const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{const t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();

2
docs/js/customization.js
View file

@ -2,7 +2,7 @@
* Customization
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
// Imports

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

File diff suppressed because one or more lines are too long

2
docs/js/grid.js
View file

@ -2,7 +2,7 @@
* Grid
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
const grid = {

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

@ -1 +1 @@
"use strict";var grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+=" &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
"use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){let t=document.createElement("P");t.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+=" &lt;<b>div</b>&gt;"+(t+1)+"&lt;/<b>div</b>&gt;\n";r+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

6
docs/js/modal.js
View file

@ -2,7 +2,7 @@
* Modal
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
// Config
@ -16,7 +16,7 @@ let visibleModal = null;
// Toggle modal
const toggleModal = event => {
event.preventDefault();
const modal = document.getElementById(event.target.getAttribute('data-target'));
const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
(typeof(modal) != 'undefined' && modal != null)
&& isModalOpen(modal) ? closeModal(modal) : openModal(modal)
}
@ -92,4 +92,4 @@ const getScrollbarWidth = () => {
// Is scrollbar visible
const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height;
}
}

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

@ -1 +1 @@
"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400,visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});var getScrollbarWidth=function(){var e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div");e.appendChild(t);t=e.offsetWidth-t.offsetWidth;return e.parentNode.removeChild(e),t},isScrollbarVisible=function(){return document.body.scrollHeight>screen.height};
"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{if(null!=visibleModal){const t=visibleModal.querySelector("article");t.contains(e.target)||closeModal(visibleModal)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div"),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;

2
docs/js/src/color-picker.js
View file

@ -2,7 +2,7 @@
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
export const colorPicker = {

23
docs/js/src/theme-switcher.js
View file

@ -2,7 +2,7 @@
* Theme switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
export const themeSwitcher = {
@ -14,13 +14,24 @@ export const themeSwitcher = {
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
localStorageKey: 'picoPreferedColorScheme',
// Init
init() {
this.scheme = this._scheme;
this.scheme = this.schemeFromLocalStorage;
this.initSwitchers();
},
// Get color scheme from local storage
get schemeFromLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
if (window.localStorage.getItem(this.localStorageKey) !== null) {
return window.localStorage.getItem(this.localStorageKey);
}
}
return this._scheme;
},
// Prefered color scheme
get preferedColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@ -52,6 +63,7 @@ export const themeSwitcher = {
this._scheme = scheme;
}
this.applyScheme();
this.schemeToLocalStorage();
},
// Get scheme
@ -71,6 +83,13 @@ export const themeSwitcher = {
}
);
},
// Store scheme to local storage
schemeToLocalStorage() {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.setItem(this.localStorageKey, this.scheme);
}
},
};
export default themeSwitcher;

2
docs/js/src/toggle-navigation.js
View file

@ -2,7 +2,7 @@
* Toggle navigation
*
* Pico.css - https://picocss.com
* Copyright 2019-2021 - Licensed under MIT
* Copyright 2019-2022 - Licensed under MIT
*/
export const toggleNavigation = {

2
docs/loading.html
View file

File diff suppressed because one or more lines are too long

4
docs/modal.html
View file

File diff suppressed because one or more lines are too long

4
docs/navs.html
View file

File diff suppressed because one or more lines are too long

2
docs/progress.html
View file

File diff suppressed because one or more lines are too long

4
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scroller.html
View file

File diff suppressed because one or more lines are too long

53
docs/scss/components/_nav.scss
View file

@ -3,6 +3,8 @@
*/
body > nav {
--nav-link-spacing-vertical: 1rem;
-webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 99;
position: fixed;
@ -26,31 +28,38 @@ body > nav {
}
// Band & Title
ul:first-of-type li {
// Brand
&:first-of-type {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
ul:first-of-type {
margin-left: calc(var(--spacing) * -1);
svg {
height: 3.5rem;
li {
padding: 0;
// Brand
&:first-of-type {
a {
display: block;
margin: 0;
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
}
}
}
// Title
&:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;
// Title
&:nth-of-type(2) {
display: none;
margin-left: calc(var(--spacing) * 1.5);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;
}
}
}
}

5
docs/scss/content/_typography.scss
View file

@ -10,11 +10,6 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role="button"] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role="document"] {
section > h1,
section > h2,

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

@ -17,6 +17,7 @@ main > aside {
}
a#toggle-docs-navigation {
display: block;
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
@ -64,7 +65,14 @@ main > aside {
}
}
}
details {
padding-bottom: 0;
summary {
padding-bottom: 0.5rem;
}
}
li,
summary {
@ -73,8 +81,13 @@ main > aside {
font-size: 16px;
}
ul {
padding-left: 0.25rem;
}
li a {
padding: 0.375rem 0.5rem;
--nav-link-spacing-vertical: 0.25rem;
--nav-link-spacing-horizontal: 0.75rem;
svg {
vertical-align: middle;
@ -86,8 +99,8 @@ main > aside {
color: var(--primary-hover);
}
a.active,
a.active:hover {
a[aria-current],
a[aria-current]:hover {
color: var(--primary);
}
@ -107,9 +120,9 @@ main > aside {
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.75);
margin-bottom: 0;
&:not(:focus) {
&:not([role=button]):not(:focus) {
color: var(--h1-color);
}
}

7
docs/scss/layout/_documentation.scss
View file

@ -117,6 +117,13 @@
}
}
// Docs: Buttons
#buttons {
a[role="button"] {
margin-right: calc(var(--spacing) * 0.5);
}
}
// Docs: Forms
#forms div.grid {
grid-row-gap: 0;

3
docs/src/_sidebar.html
View file

@ -43,6 +43,7 @@
<ul>
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
<li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li>
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
@ -67,7 +68,7 @@
<script>
const activeLink = document.querySelector(`aside a#${props.active}`);
const parentAccordion = activeLink.closest('details');
activeLink.classList.add('active');
activeLink.setAttribute('aria-current', 'page');
parentAccordion.setAttribute('open', 'true');
</script>
</aside>

44
docs/src/accordions.html
View file

@ -22,11 +22,11 @@
</hgroup>
<article aria-label="Accordions examples">
<details>
<summary>Collapsible elements 1</summary>
<summary>Accordion 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
</details>
<details open>
<summary>Collapsible elements 2</summary>
<summary>Accordion 2</summary>
<ul>
<li>Vestibulum id elit quis massa interdum sodales.</li>
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
@ -37,18 +37,54 @@
<footer class="code">
<pre><code>&lt;<b>details</b>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
&lt;<b>summary</b>&gt;Accordion 1&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
&lt;<b>details</b> <i>open</i>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
&lt;<b>summary</b>&gt;Accordion 2&lt;/<b>summary</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre>
</footer>
</article>
<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code>&lt;<b>summary</b>&gt;</code> into a button.</p>
<article aria-label="Accordions buttons examples">
<details>
<summary role="button">Accordion 1</summary>
<p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
</details>
<details>
<summary role="button" class="secondary">Accordion 2</summary>
<p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
</details>
<details>
<summary role="button" class="contrast">Accordion 3</summary>
<p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
</details>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;Accordion 1&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Accordion 2&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Accordion 3&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
</section>

1
docs/src/buttons.html
View file

@ -42,6 +42,7 @@
</footer>
</article>
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
<article aria-label="Buttons styles examples">
<a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>

2
docs/src/containers.html
View file

@ -61,7 +61,7 @@
</tbody>
</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>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct children 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> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section>

379
docs/src/dropdowns.html Normal file
View file

@ -0,0 +1,379 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdowns</h1>
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p>
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
<article aria-label="Dropdowns as Selects">
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<select required>
<option value="" disabled selected>Select</option>
<option>Option</option>
<option>Another option</option>
<option>Something else here</option>
</select>
<footer class="code">
<pre><code><em>&lt;!-- Dropdown --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Select --&gt;</em>
&lt;<b>select</b></u>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
</code></pre>
</footer>
</article>
<p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
<article aria-label="Dropdowns as Buttons">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
Dropdown as a button 1
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
Dropdown as a button 2
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
Dropdown as a button 3
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre>
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
<article aria-label="Dropdowns with radio buttons or checkboxes">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
<li>
<label for="small">
<input type="radio" id="small" name="size" value="small" />
Small
</label>
</li>
<li>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium" />
Medium
</label>
</li>
<li>
<label for="large">
<input type="radio" id="large" name="size" value="large" />
Large
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Select multiple elements</summary>
<ul role="listbox">
<li>
<label>
<input type="checkbox" />
Banana
</label>
</li>
<li>
<label>
<input type="checkbox" />
Watermelon
</label>
</li>
<li>
<label>
<input type="checkbox" />
Apple
</label>
</li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</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
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- With checkboxes --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Banana
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Watermelon
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Apple
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
<p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
<p>Example with a dropdown as a link:</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li><strong>Brand</strong></li>
</ul>
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li>
<details role="list" dir="rtl">
<summary aria-haspopup="listbox" role="link">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p>Example with a default dropdown and a dropdown as a button:</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li>
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
<li>
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p>You can also use <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
<p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li><strong>Brand</strong></li>
</ul>
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li role="list" dir="rtl">
<a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>

9
docs/src/forms.html
View file

@ -210,8 +210,10 @@
</footer>
</article>
<p>Others input types:</p>
<article aria-label="File browser, range slider, date, time, color examples">
<article aria-label="Search, file browser, range slider, date, time, color examples">
<input type="search" id="search" name="search" placeholder="Search">
<label for="file">File browser
<input type="file" id="file" name="file">
</label>
@ -229,7 +231,10 @@
</label>
<footer class="code">
<pre><code><em>&lt;!-- File browser --&gt;</em>
<pre><code><em>&lt;!-- Search --&gt;</em>
&lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
&lt;!-- File browser --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
&lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
&lt;/<b>label</b>&gt;

6
docs/src/index.html
View file

@ -3,7 +3,7 @@
<head>
${require('./_head.html')
title="Documentation"
description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
description="Pico works without package manager or dependencies! There are 4 ways to get started with pico.css: manually, from a CDN, with NPM, or with Composer."
canonical=""
}
</head>
@ -20,7 +20,7 @@
<h1>Usage</h1>
<h2>Works without package manager or dependencies 🙂!</h2>
</hgroup>
<p>There are 3 ways to get started with pico.css:</p>
<p>There are 4 ways to get started with pico.css:</p>
<h3>Install manually</h3>
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
@ -29,6 +29,8 @@
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
<h3>Install with NPM</h3>
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
<h3>Install with Composer</h3>
<pre><code><b>composer</b> <i>require</i> <u>picocss/pico</u></code></pre>
<p>Starter HTML template:</p>
<pre><code><em>&lt;!doctype html&gt;</em>

6
docs/src/modal.html
View file

@ -70,7 +70,6 @@
</article>
</dialog>
<pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
&lt;<b>article</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
@ -139,9 +138,7 @@
</article>
<p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
<p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p>
<pre><code><em>&lt;!-- Open modal--&gt;</em>
@ -160,9 +157,8 @@
</code></pre>
<h2>Utilities</h2>
<p>Modals come with 3 utility classes.</p>
<p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
<p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
<pre><code><em>&lt;!doctype html&gt;</em>

4
docs/src/navs.html
View file

@ -28,7 +28,7 @@
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
</ul>
</nav>
<footer class="code">
@ -40,7 +40,7 @@
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Button&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

2
docs/src/rtl.html
View file

@ -27,7 +27,7 @@
<em>...</em>
&lt;/<b>html</b>&gt;</code></pre>
<p>The RTL feature is still experimental and will probably evolve.</p>
<p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
</section>
${require('./_footer.html')}

6
docs/src/typography.html
View file

@ -166,10 +166,8 @@
</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>
<p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
<article aria-label="Links examples">
<a href="#" onclick="event.preventDefault()">Primary</a><br />
<a href="#" onclick="event.preventDefault()" class="secondary"

2
docs/tables.html
View file

File diff suppressed because one or more lines are too long

2
docs/themes.html
View file

File diff suppressed because one or more lines are too long

2
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

4
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2
docs/we-love-classes.html
View file

File diff suppressed because one or more lines are too long

2408
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

29
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@picocss/pico",
"version": "1.4.4",
"version": "1.5.2",
"description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche",
"main": "css/pico.min.css",
@ -79,25 +79,26 @@
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
},
"devDependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.8",
"autoprefixer": "^10.4.2",
"clean-css-cli": "^5.5.0",
"css-declaration-sorter": "^6.1.4",
"@babel/cli": "^7.17.10",
"@babel/core": "^7.18.0",
"@babel/preset-env": "^7.18.0",
"autoprefixer": "^10.4.7",
"clean-css-cli": "^5.6.0",
"css-declaration-sorter": "^6.2.2",
"html-includes": "^4.4.1",
"nodemon": "^2.0.15",
"nodemon": "^2.0.16",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.5",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"postcss-scss": "^4.0.3",
"rollup": "^2.64.0",
"sass": "^1.48.0",
"uglify-js": "^3.14.5"
"postcss-scss": "^4.0.4",
"rollup": "^2.74.1",
"sass": "^1.52.1",
"uglify-js": "^3.15.5"
},
"browserslist": [
">= 0.5%",
"last 2 major versions",
"not dead"
"not dead",
"not ie > 0"
]
}

50
scss/components/_accordion.scss
View file

@ -5,15 +5,18 @@
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing) * 0.5);
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(--accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(--transition);
}
@ -36,10 +39,11 @@ details {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -51,14 +55,31 @@ details {
&:focus {
outline: none;
color: var(--accordion-active-summary-color);
&:not([role="button"]) {
color: var(--accordion-active-summary-color);
}
}
~ * {
margin-top: calc(var(--spacing) * 0.5);
// Type button
&[role="button"] {
width: 100%;
text-align: left;
~ * {
margin-top: 0;
// Marker
&::after {
height: calc(1rem * var(--line-height, 1.5));
background-image: var(--icon-chevron-button);
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(--icon-chevron-button-inverse);
}
}
}
}
}
@ -66,15 +87,17 @@ details {
// Open
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.25);
margin-bottom: calc(var(--spacing));
&:not(:focus) {
color: var(--accordion-open-summary-color);
&:not([role]) {
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
}
@ -82,8 +105,11 @@ details {
[dir="rtl"] {
details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
}
}
}

5
scss/components/_card.scss
View file

@ -5,7 +5,6 @@
article {
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
overflow: hidden;
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);
@ -23,11 +22,15 @@ article {
margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
> footer {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
}

208
scss/components/_dropdown.scss Normal file
View file

@ -0,0 +1,208 @@
/**
* Dropdown ([role="list"])
*/
// Menu
details[role="list"],
li[role="list"] {
position: relative;
}
details[role="list"] summary + ul,
li[role="list"] > ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}
}
// Marker
details[role="list"] summary,
li[role="list"] > a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
// Global dropdown only
details[role="list"] {
padding: 0;
border-bottom: none;
// Style <summary> as <select>
summary {
margin-bottom: 0;
&:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
}
// Close for details[role="list"]
&[open] summary {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
&::before {
display: block;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: none;
content: "";
cursor: default;
}
}
}
// All Dropdowns inside <nav>
nav details[role="list"] summary,
nav li[role="list"] a {
display: flex;
direction: ltr;
}
nav details[role="list"] summary + ul,
nav li[role="list"] > ul {
min-width: fit-content;
border-radius: var(--border-radius);
li a {
border-radius: 0;
}
}
// Dropdowns inside <nav> as nested <details>
nav details[role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: var(--outline-width);
margin-inline-start: 0;
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
}
}
// Dropdowns inside a <nav> without using <details>
li[role="list"] {
// Open on hover (for mobile)
// or on active/focus (for keyboard navigation)
&:hover > ul,
a:active ~ ul,
a:focus ~ ul {
display: flex;
}
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
> a::after {
background-image: var(--icon-chevron);
}
}

26
scss/components/_modal.scss
View file

@ -21,23 +21,24 @@ dialog {
height: inherit;
min-height: 100%;
padding: var(--spacing);
border: none;
border: 0;
background-color: var(--modal-overlay-background-color);
color: var(--color);
// Content
article {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@if map-get($breakpoints, 'sm') {
@media (min-width: map-get($breakpoints, 'sm')) {
max-width: map-get($viewports, 'sm');
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, 'md') {
@media (min-width: map-get($breakpoints, 'md')) {
max-width: map-get($viewports, 'md');
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@ -58,7 +59,7 @@ dialog {
> footer {
text-align: right;
[role='button'] {
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
@ -92,9 +93,7 @@ dialog {
transition: opacity var(--transition);
}
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
}
@ -103,7 +102,7 @@ dialog {
// Closed state
&:not([open]),
&[open='false'] {
&[open="false"] {
display: none;
}
}
@ -125,8 +124,7 @@ dialog {
@if ($enable-classes and $enable-transitions) {
$animation-duration: 0.2s;
.modal-is-opening,
.modal-is-closing {
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;

50
scss/components/_nav.scss
View file

@ -2,6 +2,18 @@
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// Pico
// ––––––––––––––––––––
// Horizontal Nav
nav,
nav ul {
@ -19,35 +31,34 @@ nav {
list-style: none;
&:first-of-type {
margin-left: calc(var(--spacing) * -0.5);
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
}
@ -91,11 +102,16 @@ aside {
}
li {
padding: calc(var(--spacing) * 0.5);
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}

4
scss/components/_progress.scss
View file

@ -4,7 +4,7 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE
@ -40,7 +40,7 @@ progress {
&::-webkit-progress-bar {
border-radius: var(--border-radius);
background: transparent;
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(--progress-color);

92
scss/content/_button.scss
View file

@ -4,11 +4,11 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari
// 2. Remove the margin on controls in Safari
// 3. Show the overflow in Edge
button {
margin: 0; // 2
@ -17,7 +17,7 @@ button {
text-transform: none; // 1
}
// Correct the inability to style clickable types in iOS and Safari
// Correct the inability to style buttons in iOS and Safari
button,
[type="button"],
[type="reset"],
@ -25,15 +25,6 @@ button,
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Pico
// ––––––––––––––––––––
@ -77,9 +68,7 @@ input[type="reset"],
box-shadow var(--transition);
}
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -96,19 +85,14 @@ input[type="reset"],
@if $enable-classes {
// Secondary
button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
input[type="reset"],
[role="button"].secondary {
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
@ -121,18 +105,12 @@ input[type="reset"],
}
// Contrast
button.contrast,
input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
[role="button"].contrast {
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
@ -145,53 +123,36 @@ input[type="reset"],
}
// Outline (primary)
button.outline,
input[type="submit"].outline,
input[type="button"].outline,
input[type="reset"].outline,
[role="button"].outline {
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
input[type="reset"].outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="button"].outline.secondary,
input[type="reset"].outline.secondary,
[role="button"].outline.secondary {
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="button"].outline.contrast,
input[type="reset"].outline.contrast,
[role="button"].outline.contrast {
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
}
}
}
@else {
// Secondary button without .class
input[type="reset"] {
@ -200,9 +161,7 @@ input[type="reset"],
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
@ -215,13 +174,10 @@ input[type="reset"],
}
// Button [disabled]
// 1. Links without href are disabled by default
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"]:not([href]), // 1
[role="button"][disabled] {
// Links without href are disabled by default
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
a[role="button"]:not([href]) {
opacity: 0.5;
pointer-events: none;
}
}

6
scss/content/_code.scss
View file

@ -4,11 +4,11 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the font sizing in all browsers
// 2. Correct the odd `em` font sizing in all browsers
pre,
code,
kbd,
@ -50,7 +50,7 @@ pre {
> code {
display: block;
padding: var(--spacing);
background: transparent;
background: none;
font-size: 14px;
line-height: var(--line-height);
}

13
scss/content/_embedded.scss
View file

@ -4,16 +4,11 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Change the alignment on media elements in all browsers (opinionated)
audio,
canvas,
iframe,
img,
svg,
video {
:where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
@ -30,7 +25,7 @@ audio:not([controls]) {
}
// Remove the border on iframes in all browsers (opinionated)
iframe {
:where(iframe) {
border-style: none;
}
@ -43,7 +38,7 @@ img {
}
// Change the fill color to match the text color in all browsers (opinionated)
svg:not([fill]) {
:where(svg:not([fill])) {
fill: currentColor;
}

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

@ -20,7 +20,7 @@
// Swatch
@mixin color-swatch {
border: none;
border: 0;
border-radius: calc(var(--border-radius) * 0.5);
}
@ -35,7 +35,7 @@
// Date & Time
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&[type="date"],
&[type="datetime-local"],
&[type="month"],
@ -70,31 +70,19 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
}
}
[dir="rtl"] {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
text-align: right;
}
[dir="rtl"]
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
// File
[type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
border: none;
border: 0;
border-radius: 0;
background: none;
&:hover,
&:active,
&:focus {
border: none;
background: none;
}
@mixin file-selector-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
@ -123,9 +111,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
box-shadow var(--transition);
}
&:hover,
&:active,
&:focus {
&:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
@ -157,7 +143,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
appearance: none;
width: 100%;
height: $height-thumb;
background: transparent;
background: none;
// Slider Track
@mixin slider-track {
@ -238,14 +224,32 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
// Search
// :not() are needed to add Specificity and avoid !important on padding
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
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);
padding-inline-start: 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;
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
}
@else {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(--icon-search), var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-search), var(--icon-invalid);
}
}
}
@ -256,3 +260,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
display: none;
}
}
[dir="rtl"] {
:where(input) {
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
&[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
}
}
}
}

66
scss/content/_form.scss
View file

@ -4,7 +4,7 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
@ -174,20 +174,16 @@ textarea {
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
:where(select, textarea) {
&:is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
:where(select, textarea) {
&:is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
}
@ -202,21 +198,18 @@ textarea {
}
// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
&[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
// Aria-invalid
input,
select,
textarea {
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid] {
@if $enable-important {
@ -228,7 +221,8 @@ textarea {
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
} @else {
}
@else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
@ -242,7 +236,7 @@ textarea {
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
@ -251,12 +245,12 @@ textarea {
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:active,
&:focus {
&:is(:active, :focus) {
@if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
} @else {
}
@else {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
@ -265,13 +259,13 @@ textarea {
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:active,
&:focus {
&:is(:active, :focus) {
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
} @else {
}
@else {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
@ -280,9 +274,7 @@ textarea {
}
[dir="rtl"] {
input,
select,
textarea {
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid],
&[aria-invalid="true"],
@ -339,9 +331,7 @@ select {
}
// Helper
input,
select,
textarea {
:where(input, select, textarea) {
+ small {
display: block;
width: 100%;
@ -353,9 +343,7 @@ textarea {
// Styles for Input inside a label
label {
& > input,
& > select,
& > textarea {
> :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}
}

16
scss/content/_miscs.scss
View file

@ -4,17 +4,16 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct box sizing in Firefox
// 2. Show the overflow in Edge and IE
// 1. Correct the inheritance of border color in Firefox
// 2. Add the correct box sizing in Firefox
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
border: none;
height: 0; // 2
border: 0;
border-top: 1px solid var(--muted-border-color);
color: inherit; // 1
}
// Add the correct display in IE 10+
@ -22,7 +21,8 @@ hr {
template {
@if $enable-important {
display: none !important;
} @else {
}
@else {
display: none;
}
}

12
scss/content/_table.scss
View file

@ -4,18 +4,16 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Collapse border spacing in all browsers (opinionated).
// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
table {
// 1. Collapse border spacing in all browsers (opinionated)
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
:where(table) {
width: 100%;
border-color: inherit; // 2
border-collapse: collapse; // 1
border-spacing: 0;
text-indent: 0; // 3
text-indent: 0; // 2
}
// Pico

64
scss/content/_typography.scss
View file

@ -4,7 +4,7 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari
@ -28,23 +28,6 @@ sup {
top: -0.5em;
}
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
margin: 0;
}
// Remove the margin on nested lists in Edge 18- and IE
ol ol,
ol ul,
ul ol,
ul ul {
margin: 0;
}
// Pico
// ––––––––––––––––––––
@ -68,7 +51,8 @@ ul {
// Links
// 1. Remove the gray background on active links in IE 10
a {
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -81,9 +65,7 @@ a {
text-decoration var(--transition), box-shadow var(--transition);
}
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -97,9 +79,7 @@ a {
&.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
@ -112,9 +92,7 @@ a {
&.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
@ -160,22 +138,8 @@ h6 {
}
// Margin-top for headings after a typography block
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
& ~ h1,
& ~ h2,
& ~ h3,
& ~ h4,
& ~ h5,
& ~ h6 {
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
}
}
@ -227,8 +191,7 @@ small {
}
// Lists
ul,
ol {
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-start: var(--spacing);
@ -239,6 +202,15 @@ ol {
}
}
// Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
:where(dl, ol, ul) {
:is(dl, ol, ul) {
margin: 0; // 1
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}
}
ul li {
list-style: square;
}

33
scss/layout/_document.scss
View file

@ -5,14 +5,16 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
@ -23,23 +25,24 @@
vertical-align: inherit; // 2
}
// 1. Correct the line height in all browsers
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
// 3. Change the default tap highlight to be completely transparent in iOS
// 4. Use the default cursor in all browsers (opinionated)
// 5. Use a 4-space tab width in all browsers (opinionated)
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
-ms-text-size-adjust: 100%; // 6
// 1. Use the default cursor in all browsers (opinionated)
// 2. Change the line height in all browsers (opinionated)
// 3. Breaks words to prevent overflow in all browsers (opinionated)
// 4. Use a 4-space tab width in all browsers (opinionated)
// 5. Remove the grey highlight on links in iOS (opinionated)
// 6. Prevent adjustments of font size after orientation changes in iOS
:where(:root) {
-webkit-tap-highlight-color: transparent; // 5
-webkit-text-size-adjust: 100%; // 6
text-size-adjust: 100%; // 6
text-rendering: optimizeLegibility;
background-color: var(--background-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
line-height: var(--line-height); // 1
line-height: var(--line-height); // 2
font-family: var(--font-family);
cursor: default; // 4
tab-size: 4; // 5
overflow-wrap: break-word; // 3
cursor: default; // 1
tab-size: 4; // 4
}

5
scss/layout/_sectioning.scss
View file

@ -5,7 +5,7 @@
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Render the `main` element consistently in IE
@ -16,9 +16,10 @@ main {
// Pico
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0;
margin: 0; // 1
> header,
> main,

5
scss/pico.scss
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
* Pico.css v1.5.2 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
*/
// Config
@ -34,6 +34,7 @@
@import "components/modal"; // dialog
@import "components/nav"; // nav
@import "components/progress"; // progress
@import "components/dropdown"; // dropdown
// Utilities
@import "utilities/loading"; // aria-busy=true

4
scss/pico.slim.scss
View file

@ -1,6 +1,6 @@
/*!
* Pico.css v1.4.4 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT
* Pico.css v1.5.2 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need

25
scss/themes/default/_dark.scss
View file

@ -103,13 +103,28 @@
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
0 0.125rem 2rem #{rgba($black, 0.12)},
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-border-color: var(--card-background-color);
--card-box-shadow:
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{$grey-900};
--dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
@ -127,6 +142,8 @@
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($black, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

25
scss/themes/default/_light.scss
View file

@ -103,12 +103,27 @@
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
0 0.125rem 2rem #{rgba($grey-900, 0.08)},
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
--card-box-shadow:
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
@ -127,6 +142,8 @@
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

Some files were not shown because too many files have changed in this diff Show more