pico added to CDN
This commit is contained in:
parent
46809532c2
commit
1b6b2003ae
|
|
@ -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`.
|
||||
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M0 0h1000v1000H0z" fill="#1b2a32"/><path d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 555 B |
|
|
@ -0,0 +1,5 @@
|
|||
node_modules/
|
||||
tests/
|
||||
.nvmrc
|
||||
.prettierrc.js
|
||||
*.DS_Store
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019-2023 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<p align="center">
|
||||
<a href="https://picocss.com/">
|
||||
<img src=".github/logo.svg" width="64" height="64">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 align="center">Pico CSS</h3>
|
||||
|
||||
<p align="center">
|
||||
<strong>Minimal CSS Framework for semantic HTML</strong><br>
|
||||
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
||||
<a href="https://picocss.com/#examples">Examples</a> ·
|
||||
<a href="https://picocss.com/docs/">Documentation</a>
|
||||
</p>
|
||||
|
||||
## Pico CSS
|
||||
[](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css)
|
||||
[](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css)
|
||||
[](https://github.com/picocss/pico/releases/latest)
|
||||
[](https://www.npmjs.com/package/@picocss/pico)
|
||||
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
||||
[](https://twitter.com/picocss)
|
||||
|
||||
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
|
||||
|
||||
**Class-light and semantic**
|
||||
Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
|
||||
|
||||
**Great styles with just one CSS file**
|
||||
No dependencies, package manager, external files, or JavaScript.
|
||||
|
||||
**Responsive everything**
|
||||
Elegant and consistent adaptive spacings and typography on all devices.
|
||||
|
||||
**Light or Dark mode**
|
||||
Shipped with two beautiful color themes, automatically enabled according to the user preference.
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Usage](#usage)
|
||||
- [Class-less version](#class-less-version)
|
||||
- [Examples](#examples)
|
||||
- [Limitations](#limitations)
|
||||
- [Documentation](#documentation)
|
||||
- [Browser Support](#browser-support)
|
||||
- [Contributing](#contributing)
|
||||
- [Copyright and license](#copyright-and-license)
|
||||
|
||||
## Usage
|
||||
|
||||
There are 4 ways to get started with Pico CSS:
|
||||
|
||||
**Install manually**
|
||||
|
||||
[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.9.zip) and link `/css/pico.min.css` in the `<head>` of your website.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/pico.min.css">
|
||||
```
|
||||
|
||||
**Install from CDN**
|
||||
|
||||
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
|
||||
```
|
||||
|
||||
**Install with NPM**
|
||||
|
||||
```shell
|
||||
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)).
|
||||
|
||||
In this version, `header`, `main` and `footer` act as containers.
|
||||
|
||||
Use the default `.classless` version if you need centered viewports:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
|
||||
```
|
||||
|
||||
Or use the `.fluid.classless` version if you need a fluid container:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css">
|
||||
```
|
||||
|
||||
Then just write pure HTML, and it should look great:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
|
||||
<title>Hello, world!</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Hello, world!</h1>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Minimalist templates to discover Pico in action:
|
||||
|
||||
[](https://picocss.com/#examples)
|
||||
|
||||
- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**
|
||||
A starter example with most of the Pico components and styles.
|
||||
|
||||
- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**
|
||||
A starter example in Arabic with most of the Pico components and styles.
|
||||
|
||||
- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**
|
||||
A pure semantic HTML markup, without `.classes`.
|
||||
|
||||
- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**
|
||||
A basic custom template for Pico using only CSS custom properties (variables).
|
||||
|
||||
- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**
|
||||
A classic company or blog layout with a sidebar.
|
||||
|
||||
- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**
|
||||
A simple layout for Google Amp, with inlined CSS.
|
||||
|
||||
- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**
|
||||
A minimalist layout for Login pages.
|
||||
|
||||
- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**
|
||||
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.
|
||||
|
||||
All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
|
||||
|
||||
## Limitations
|
||||
|
||||
Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
|
||||
|
||||
## Documentation
|
||||
|
||||
**Getting started**
|
||||
|
||||
- [Usage](https://picocss.com/docs/)
|
||||
- [Themes](https://picocss.com/docs/themes.html)
|
||||
- [Customization](https://picocss.com/docs/customization.html)
|
||||
- [Class-less version](https://picocss.com/docs/classless.html)
|
||||
- [RTL](https://picocss.com/docs/rtl.html)
|
||||
|
||||
**Layout**
|
||||
|
||||
- [Containers](https://picocss.com/docs/containers.html)
|
||||
- [Grids](https://picocss.com/docs/grid.html)
|
||||
- [Horizontal scroller](https://picocss.com/docs/scroller.html)
|
||||
|
||||
**Elements**
|
||||
|
||||
- [Typography](https://picocss.com/docs/typography.html)
|
||||
- [Buttons](https://picocss.com/docs/buttons.html)
|
||||
- [Forms](https://picocss.com/docs/forms.html)
|
||||
- [Tables](https://picocss.com/docs/tables.html)
|
||||
|
||||
**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)
|
||||
|
||||
**Utilities**
|
||||
|
||||
- [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
|
||||
|
||||
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
|
||||
|
||||
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
||||
|
||||
**Relevant third-party tools and resources we depend on:**
|
||||
|
||||
Website and docs:
|
||||
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
||||
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
|
||||
|
||||
Pico Library:
|
||||
- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
||||
- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
||||
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))
|
||||
|
|
@ -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"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,12 @@
|
|||
module.exports = {
|
||||
map: {
|
||||
inline: false,
|
||||
annotation: true,
|
||||
sourcesContent: true
|
||||
},
|
||||
plugins: {
|
||||
autoprefixer: {
|
||||
cascade: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,526 @@
|
|||
/**
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
--spacing: 1rem;
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--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;
|
||||
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
:root {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
dialog > article {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
dialog > article {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
dialog > article {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
--text-decoration: none;
|
||||
}
|
||||
a.secondary, a.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type=checkbox][role=switch] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
thead th,
|
||||
thead td,
|
||||
tfoot th,
|
||||
tfoot td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
:not(thead, tfoot) > * > td {
|
||||
--font-size: 0.875em;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
|
||||
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
--background-color: #fff;
|
||||
--color: hsl(205, 20%, 32%);
|
||||
--h1-color: hsl(205, 30%, 15%);
|
||||
--h2-color: #24333e;
|
||||
--h3-color: hsl(205, 25%, 23%);
|
||||
--h4-color: #374956;
|
||||
--h5-color: hsl(205, 20%, 32%);
|
||||
--h6-color: #4d606d;
|
||||
--muted-color: hsl(205, 10%, 50%);
|
||||
--muted-border-color: hsl(205, 20%, 94%);
|
||||
--primary: hsl(195, 85%, 41%);
|
||||
--primary-hover: hsl(195, 90%, 32%);
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #fff;
|
||||
--secondary: hsl(205, 15%, 41%);
|
||||
--secondary-hover: hsl(205, 20%, 32%);
|
||||
--secondary-focus: rgba(89, 107, 120, 0.125);
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: hsl(205, 30%, 15%);
|
||||
--contrast-hover: #000;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||
--contrast-inverse: #fff;
|
||||
--mark-background-color: #fff2ca;
|
||||
--mark-color: #543a26;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--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: hsl(205, 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: hsl(205, 18%, 86%);
|
||||
--form-element-disabled-border-color: hsl(205, 14%, 68%);
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #c62828;
|
||||
--form-element-invalid-active-border-color: #d32f2f;
|
||||
--form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
||||
--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: hsl(205, 16%, 77%);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: hsl(205, 18%, 86%);
|
||||
--range-active-border-color: hsl(205, 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: hsl(205, 20%, 94%);
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: hsl(330, 40%, 50%);
|
||||
--code-property-color: hsl(185, 40%, 40%);
|
||||
--code-value-color: hsl(40, 20%, 50%);
|
||||
--code-comment-color: hsl(205, 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.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(205, 20%, 94%);
|
||||
--modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
||||
--progress-background-color: hsl(205, 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='rgb(255, 255, 255)' 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='rgb(65, 84, 98)' 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='rgb(255, 255, 255)' 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='rgb(255, 255, 255)' 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='rgb(115, 130, 140)' 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='rgb(65, 84, 98)' 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='rgb(198, 40, 40)' 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");
|
||||
--icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-search: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--background-color: #11191f;
|
||||
--color: hsl(205, 16%, 77%);
|
||||
--h1-color: hsl(205, 20%, 94%);
|
||||
--h2-color: #e1e6eb;
|
||||
--h3-color: hsl(205, 18%, 86%);
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: hsl(205, 16%, 77%);
|
||||
--h6-color: #afbbc4;
|
||||
--muted-color: hsl(205, 10%, 50%);
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: hsl(195, 85%, 41%);
|
||||
--primary-hover: hsl(195, 80%, 50%);
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #fff;
|
||||
--secondary: hsl(205, 15%, 41%);
|
||||
--secondary-hover: hsl(205, 10%, 50%);
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: hsl(205, 20%, 94%);
|
||||
--contrast-hover: #fff;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d1c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--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: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--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: hsl(205, 25%, 23%);
|
||||
--form-element-disabled-border-color: hsl(205, 20%, 32%);
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #b71c1c;
|
||||
--form-element-invalid-active-border-color: #c62828;
|
||||
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||
--form-element-valid-border-color: #2e7d32;
|
||||
--form-element-valid-active-border-color: #388e3c;
|
||||
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #24333e;
|
||||
--range-active-border-color: hsl(205, 25%, 23%);
|
||||
--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: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #18232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: hsl(330, 30%, 50%);
|
||||
--code-property-color: hsl(185, 30%, 50%);
|
||||
--code-value-color: hsl(40, 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: 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(205, 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.8);
|
||||
--progress-background-color: #24333e;
|
||||
--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='rgb(255, 255, 255)' 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='rgb(162, 175, 185)' 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='rgb(255, 255, 255)' 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='rgb(0, 0, 0)' 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='rgb(115, 130, 140)' 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='rgb(162, 175, 185)' 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='rgb(183, 28, 28)' 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");
|
||||
--icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
[data-theme=dark] {
|
||||
--background-color: #11191f;
|
||||
--color: hsl(205, 16%, 77%);
|
||||
--h1-color: hsl(205, 20%, 94%);
|
||||
--h2-color: #e1e6eb;
|
||||
--h3-color: hsl(205, 18%, 86%);
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: hsl(205, 16%, 77%);
|
||||
--h6-color: #afbbc4;
|
||||
--muted-color: hsl(205, 10%, 50%);
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: hsl(195, 85%, 41%);
|
||||
--primary-hover: hsl(195, 80%, 50%);
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #fff;
|
||||
--secondary: hsl(205, 15%, 41%);
|
||||
--secondary-hover: hsl(205, 10%, 50%);
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: hsl(205, 20%, 94%);
|
||||
--contrast-hover: #fff;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d1c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--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: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--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: hsl(205, 25%, 23%);
|
||||
--form-element-disabled-border-color: hsl(205, 20%, 32%);
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #b71c1c;
|
||||
--form-element-invalid-active-border-color: #c62828;
|
||||
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||
--form-element-valid-border-color: #2e7d32;
|
||||
--form-element-valid-active-border-color: #388e3c;
|
||||
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #24333e;
|
||||
--range-active-border-color: hsl(205, 25%, 23%);
|
||||
--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: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #18232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: hsl(330, 30%, 50%);
|
||||
--code-property-color: hsl(185, 30%, 50%);
|
||||
--code-value-color: hsl(40, 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: 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(205, 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.8);
|
||||
--progress-background-color: #24333e;
|
||||
--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='rgb(255, 255, 255)' 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='rgb(162, 175, 185)' 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='rgb(255, 255, 255)' 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='rgb(0, 0, 0)' 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='rgb(115, 130, 140)' 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='rgb(162, 175, 185)' 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='rgb(183, 28, 28)' 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");
|
||||
--icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
progress,
|
||||
[type=checkbox],
|
||||
[type=radio],
|
||||
[type=range] {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=default.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,508 @@
|
|||
/*!
|
||||
* Pico: Customs styles for Docs
|
||||
*/
|
||||
/**
|
||||
* Theme: Additions for docs
|
||||
*/
|
||||
:root {
|
||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
--invalid-color: #c62828;
|
||||
--valid-color: #388e3c;
|
||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #fff;
|
||||
--article-code-background-color: #f9fafb;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme=light]) {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0e1419;
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
}
|
||||
[data-theme=dark] {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0e1419;
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Document
|
||||
*/
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Main (Grid)
|
||||
*/
|
||||
body > main {
|
||||
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
body > main {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
body > main > aside,
|
||||
body > main div[role=document] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-size: 0.66rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Aside
|
||||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
padding-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation svg {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
vertical-align: -3px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: block;
|
||||
}
|
||||
main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
--nav-link-spacing-vertical: 0.25rem;
|
||||
--nav-link-spacing-horizontal: 0.75rem;
|
||||
}
|
||||
main > aside li a svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
main > aside a.secondary:focus {
|
||||
background-color: transparent;
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
main > aside a[aria-current],
|
||||
main > aside a[aria-current]:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
main > aside details {
|
||||
border-bottom: none;
|
||||
}
|
||||
main > aside details summary {
|
||||
color: var(--h1-color);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
main > aside details summary::after {
|
||||
display: none;
|
||||
}
|
||||
main > aside details[open] > summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
main > aside details[open] > summary:not([role=button], :focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Documentation
|
||||
*/
|
||||
#themes button.theme-switcher:first-of-type {
|
||||
--font-weight: bold;
|
||||
}
|
||||
#themes button.theme-switcher i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#customization figure {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
#customization figure {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
#customization figure ~ article {
|
||||
margin-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
#customization figure button {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
#customization figure button:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
#customization figure button.picked {
|
||||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-size: 0.66rem auto;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
|
||||
background-image: var(--icon-check-dark);
|
||||
}
|
||||
#customization h4 {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
#customization pre[data-theme=generated] {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
#grid {
|
||||
--grid-spacing-vertical: 1rem;
|
||||
}
|
||||
#grid button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
#grid button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
#grid button svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
}
|
||||
#grid .grid > * {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--code-background-color);
|
||||
font-size: 87.5%;
|
||||
text-align: center;
|
||||
}
|
||||
#grid details {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
#grid details svg {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#buttons a[role=button] {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
#forms div.grid {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
|
||||
#modal button {
|
||||
--font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Typography
|
||||
*/
|
||||
h1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
[role=document] section > h1,
|
||||
[role=document] section > h2,
|
||||
[role=document] section > h3 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Code
|
||||
*/
|
||||
article > footer.code {
|
||||
background: var(--article-code-background-color);
|
||||
}
|
||||
|
||||
article pre,
|
||||
article pre code {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
section > pre {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background: var(--article-code-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
[data-theme=invalid],
|
||||
[data-theme=valid] {
|
||||
position: relative;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
[data-theme=invalid]:before,
|
||||
[data-theme=valid]:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0;
|
||||
color: var(--primary-inverse);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
[data-theme=invalid]:before,
|
||||
[data-theme=valid]:before {
|
||||
top: var(--spacing);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
[data-theme=invalid] code,
|
||||
[data-theme=valid] code {
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
|
||||
}
|
||||
|
||||
[data-theme=invalid]:before {
|
||||
background: var(--invalid-color);
|
||||
content: "Not so great";
|
||||
}
|
||||
|
||||
[data-theme=valid]:before {
|
||||
background: var(--valid-color);
|
||||
content: "Great";
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Modal
|
||||
*/
|
||||
dialog.example {
|
||||
display: block;
|
||||
z-index: inherit;
|
||||
position: relative;
|
||||
top: inherit;
|
||||
right: inherit;
|
||||
bottom: inherit;
|
||||
left: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
width: inherit;
|
||||
min-width: inherit;
|
||||
height: inherit;
|
||||
min-height: inherit;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
dialog.example article {
|
||||
max-width: inherit;
|
||||
}
|
||||
dialog.example:not([open]), dialog.example[open=false] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog-is-open body > button {
|
||||
filter: blur(0.125rem);
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Navs
|
||||
*/
|
||||
body > nav {
|
||||
--nav-link-spacing-vertical: 1rem;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: var(--nav-background-color);
|
||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||
}
|
||||
body > nav.container-fluid {
|
||||
padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
||||
}
|
||||
body > nav a {
|
||||
border-radius: 0;
|
||||
}
|
||||
body > nav svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
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: calc(var(--spacing) * 1.5);
|
||||
color: var(--h1-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Theme switcher
|
||||
*/
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));
|
||||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
.switcher::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 0.15rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
content: "";
|
||||
vertical-align: bottom;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
.switcher i {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-style: normal;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.switcher:hover, .switcher:focus {
|
||||
max-width: 100%;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.switcher:hover::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.switcher:hover i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
.switcher:focus {
|
||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.switcher {
|
||||
right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=pico.docs.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
* Add some magic to Pico docs
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Imports
|
||||
import themeSwitcher from './src/theme-switcher.js';
|
||||
import toggleNavigation from './src/toggle-navigation';
|
||||
|
||||
// Theme switcher
|
||||
themeSwitcher.addButton({
|
||||
tag: 'BUTTON',
|
||||
class: 'contrast switcher theme-switcher',
|
||||
target: 'body',
|
||||
});
|
||||
themeSwitcher.init();
|
||||
|
||||
// Toggle navigation
|
||||
toggleNavigation.init();
|
||||
|
|
@ -0,0 +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",localStorageKey:"picoPreferredColorScheme",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 preferredColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){document.querySelectorAll(this.buttonsTarget).forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferredColorScheme?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),document.querySelectorAll(this.buttonsTarget).forEach(e=>{var 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()}();
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* Customization
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Imports
|
||||
import materialDesignColors from './src/material-design-colors.js';
|
||||
import colorPicker from './src/color-picker.js';
|
||||
|
||||
// Color Picker
|
||||
colorPicker.colors = materialDesignColors;
|
||||
colorPicker.init();
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
"use strict";!function(){var e={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons(){let e="",a="";for(const t in this.colors)e+=`<button data-color="${t}" aria-label="Activate ${t} theme"></button>`,a+=`
|
||||
button[data-color="${t}"] {
|
||||
background-color: ${this.colors[t][600]};
|
||||
}
|
||||
[data-theme="light"] button[data-color="${t}"]:hover,
|
||||
[data-theme="light"] button[data-color="${t}"]:active,
|
||||
[data-theme="light"] button[data-color="${t}"]:focus {
|
||||
background-color: ${this.colors[t][700]}; '
|
||||
}
|
||||
[data-theme="dark"] button[data-color="${t}"]:hover,
|
||||
[data-theme="dark"] button[data-color="${t}"]:active,
|
||||
[data-theme="dark"] button[data-color="${t}"]:focus {
|
||||
background-color: ${this.colors[t][500]};
|
||||
}`;var f=document.createElement("FIGURE"),f=(f.innerHTML=e,document.querySelector(this.buttonsTarget).before(f),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(e=>{e.addEventListener("click",e=>{e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)},!1)}),document.createElement("STYLE"));f.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(a),f.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(f)},setActiveButton(e){this.buttons.forEach(e=>{e.removeAttribute("class")}),document.querySelector(this.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")},generateTheme(e){var a=e,e=this.colors[e];let f={".name":a.charAt(0).toUpperCase()+a.substring(1)+" ",".c500":e[500],".c600":e[600],".c700":e[700],".c600-outline-light":this.hexToRgbA(e[600],.125),".c600-outline-dark":this.hexToRgbA(e[600],.25),".inverse":e.inverse};Object.keys(f).forEach(a=>{document.querySelectorAll(this.selectorSection+" "+a).forEach(e=>{e.innerHTML=f[a]})});a=`
|
||||
[data-theme="generated"] {
|
||||
--h4-color: ${e[700]};
|
||||
--primary: ${e[600]};
|
||||
--primary-hover: ${e[700]};
|
||||
--primary-focus: ${this.hexToRgbA(e[600],.125)};
|
||||
--primary-inverse: ${e.inverse};
|
||||
}
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) [data-theme="generated"] {
|
||||
--h4-color: ${e[400]};
|
||||
--primary: ${e[600]};
|
||||
--primary-hover: ${e[500]};
|
||||
--primary-focus: ${this.hexToRgbA(e[600],.25)};
|
||||
--primary-inverse: ${e.inverse};
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] [data-theme="generated"] {
|
||||
--h4-color: ${e[500]};
|
||||
--primary: ${e[600]};
|
||||
--primary-hover: ${e[500]};
|
||||
--primary-focus: ${this.hexToRgbA(e[600],.25)};
|
||||
--primary-inverse: ${e.inverse};
|
||||
}
|
||||
[data-theme="generated"] {
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
}`;document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(a)},minifyCSS(e){return e.replace(/^ +/gm,"")},hexToRgbA(e,a){let f;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(f="0x"+(f=3==(f=e.substring(1).split("")).length?[f[0],f[0],f[1],f[1],f[2],f[2]]:f).join(""))>>16&255,f>>8&255,255&f].join(", ")+", "+a+")";throw new Error("Bad Hex")}};e.colors={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}},e.init()}();
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
* Grid
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
const grid = {
|
||||
|
||||
// Config
|
||||
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
|
||||
init() {
|
||||
this.addButtons();
|
||||
this.generateGrid();
|
||||
},
|
||||
|
||||
// Add buttons
|
||||
addButtons() {
|
||||
// Insert buttons
|
||||
let buttons = document.createElement('P');
|
||||
buttons.innerHTML = `
|
||||
<button class="secondary add">
|
||||
<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">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12">'</line>
|
||||
</svg>
|
||||
${this.buttons.text.add}
|
||||
</button>
|
||||
|
||||
<button class="secondary remove">
|
||||
<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">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
${this.buttons.text.remove}
|
||||
</button>`;
|
||||
document.querySelector(this.buttons.target).before(buttons);
|
||||
|
||||
// Add button listener
|
||||
document.querySelector('#grid button.add').addEventListener('click', () => {
|
||||
this.addColumn();
|
||||
}, false);
|
||||
|
||||
// Remove button listener
|
||||
document.querySelector('#grid button.remove').addEventListener('click', () => {
|
||||
this.removeColumn();
|
||||
}, false);
|
||||
},
|
||||
|
||||
// Generate grid
|
||||
generateGrid() {
|
||||
// Config
|
||||
let htmlInner = '';
|
||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||
|
||||
// Build
|
||||
for (let col = 0; col < this.grid.current; col++) {
|
||||
htmlInner += '<div>' + (col + 1) + '</div>';
|
||||
codeInner += ' <<b>div</b>>' + (col + 1) + '</<b>div</b>>\n';
|
||||
}
|
||||
|
||||
// Display
|
||||
codeInner += '</<b>div</b>>';
|
||||
document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
|
||||
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
||||
},
|
||||
|
||||
// Add column
|
||||
addColumn() {
|
||||
if (this.grid.current < this.grid.max) {
|
||||
this.grid.current++;
|
||||
this.generateGrid();
|
||||
}
|
||||
},
|
||||
|
||||
// Remove column
|
||||
removeColumn() {
|
||||
if (this.grid.current > this.grid.min) {
|
||||
this.grid.current--;
|
||||
this.generateGrid();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Init
|
||||
grid.init();
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
"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(){var t=document.createElement("P");t.innerHTML=`
|
||||
<button class="secondary add">
|
||||
<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">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12">'</line>
|
||||
</svg>
|
||||
${this.buttons.text.add}
|
||||
</button>
|
||||
|
||||
<button class="secondary remove">
|
||||
<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">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
${this.buttons.text.remove}
|
||||
</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='<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+=" <<b>div</b>>"+(t+1)+"</<b>div</b>>\n";r+="</<b>div</b>>",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();
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
/*
|
||||
* Modal
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
const isOpenClass = 'modal-is-open';
|
||||
const openingClass = 'modal-is-opening';
|
||||
const closingClass = 'modal-is-closing';
|
||||
const animationDuration = 400; // ms
|
||||
let visibleModal = null;
|
||||
|
||||
|
||||
// Toggle modal
|
||||
const toggleModal = event => {
|
||||
event.preventDefault();
|
||||
const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
|
||||
(typeof(modal) != 'undefined' && modal != null)
|
||||
&& isModalOpen(modal) ? closeModal(modal) : openModal(modal)
|
||||
}
|
||||
|
||||
// Is modal open
|
||||
const isModalOpen = modal => {
|
||||
return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
|
||||
}
|
||||
|
||||
// Open modal
|
||||
const openModal = modal => {
|
||||
if (isScrollbarVisible()) {
|
||||
document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
|
||||
}
|
||||
document.documentElement.classList.add(isOpenClass, openingClass);
|
||||
setTimeout(() => {
|
||||
visibleModal = modal;
|
||||
document.documentElement.classList.remove(openingClass);
|
||||
}, animationDuration);
|
||||
modal.setAttribute('open', true);
|
||||
}
|
||||
|
||||
// Close modal
|
||||
const closeModal = modal => {
|
||||
visibleModal = null;
|
||||
document.documentElement.classList.add(closingClass);
|
||||
setTimeout(() => {
|
||||
document.documentElement.classList.remove(closingClass, isOpenClass);
|
||||
document.documentElement.style.removeProperty('--scrollbar-width');
|
||||
modal.removeAttribute('open');
|
||||
}, animationDuration);
|
||||
}
|
||||
|
||||
// Close with a click outside
|
||||
document.addEventListener('click', event => {
|
||||
if (visibleModal != null) {
|
||||
const modalContent = visibleModal.querySelector('article');
|
||||
const isClickInside = modalContent.contains(event.target);
|
||||
!isClickInside && closeModal(visibleModal);
|
||||
}
|
||||
});
|
||||
|
||||
// Close with Esc key
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Escape' && visibleModal != null) {
|
||||
closeModal(visibleModal);
|
||||
}
|
||||
});
|
||||
|
||||
// Get scrollbar width
|
||||
const getScrollbarWidth = () => {
|
||||
|
||||
// Creating invisible container
|
||||
const outer = document.createElement('div');
|
||||
outer.style.visibility = 'hidden';
|
||||
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
|
||||
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
|
||||
document.body.appendChild(outer);
|
||||
|
||||
// Creating inner element and placing it in the container
|
||||
const inner = document.createElement('div');
|
||||
outer.appendChild(inner);
|
||||
|
||||
// Calculating difference between container's full width and the child width
|
||||
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
|
||||
|
||||
// Removing temporary elements from the DOM
|
||||
outer.parentNode.removeChild(outer);
|
||||
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
// Is scrollbar visible
|
||||
const isScrollbarVisible = () => {
|
||||
return document.body.scrollHeight > screen.height;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
"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",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=>{null==visibleModal||visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal)}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{var e=document.createElement("div"),t=(e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e),document.createElement("div")),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
/*
|
||||
* Color Picker
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const colorPicker = {
|
||||
|
||||
// Config
|
||||
colors: null,
|
||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||
selectorButton: '#customization button[data-color]',
|
||||
selectorSection: '#customization',
|
||||
buttons: null,
|
||||
generatedStyles: null,
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.generateButtons();
|
||||
this.setActiveButton('pink');
|
||||
this.generateTheme('pink');
|
||||
},
|
||||
|
||||
// Generate Buttons
|
||||
generateButtons() {
|
||||
// Init
|
||||
let innerButtons = '';
|
||||
let innerStyles = '';
|
||||
|
||||
// Loop colors
|
||||
for (const color in this.colors) {
|
||||
// Buttons
|
||||
innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
|
||||
|
||||
// Styles
|
||||
innerStyles += `
|
||||
button[data-color="${color}"] {
|
||||
background-color: ${this.colors[color]['600']};
|
||||
}
|
||||
[data-theme="light"] button[data-color="${color}"]:hover,
|
||||
[data-theme="light"] button[data-color="${color}"]:active,
|
||||
[data-theme="light"] button[data-color="${color}"]:focus {
|
||||
background-color: ${this.colors[color]['700']}; '
|
||||
}
|
||||
[data-theme="dark"] button[data-color="${color}"]:hover,
|
||||
[data-theme="dark"] button[data-color="${color}"]:active,
|
||||
[data-theme="dark"] button[data-color="${color}"]:focus {
|
||||
background-color: ${this.colors[color]['500']};
|
||||
}`;
|
||||
}
|
||||
|
||||
// Insert buttons
|
||||
let containerButtons = document.createElement('FIGURE');
|
||||
containerButtons.innerHTML = innerButtons;
|
||||
document.querySelector(this.buttonsTarget).before(containerButtons);
|
||||
|
||||
// Buttons listeners
|
||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||
this.buttons.forEach( button => {
|
||||
button.addEventListener('click', event => {
|
||||
let color = event.target.getAttribute('data-color');
|
||||
this.setActiveButton(color);
|
||||
this.generateTheme(color);
|
||||
}, false);
|
||||
});
|
||||
|
||||
// Insert CSS Styles
|
||||
let containerStyles = document.createElement('STYLE');
|
||||
containerStyles.setAttribute('title', 'color-picker');
|
||||
this.generatedStyles = this.minifyCSS(innerStyles);
|
||||
containerStyles.innerHTML = this.generatedStyles;
|
||||
document.querySelector('head').appendChild(containerStyles);
|
||||
},
|
||||
|
||||
// Set active button
|
||||
setActiveButton(color) {
|
||||
// Remove all active states
|
||||
this.buttons.forEach( button => {
|
||||
button.removeAttribute('class');
|
||||
});
|
||||
|
||||
// Set active state
|
||||
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
|
||||
buttonPicked.setAttribute('class', 'picked');
|
||||
},
|
||||
|
||||
// Set active button
|
||||
generateTheme(color) {
|
||||
let name = color;
|
||||
let data = this.colors[color];
|
||||
|
||||
// 1. Update name and colors in demo code
|
||||
let swaps = {
|
||||
'.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
|
||||
'.c500': data[500],
|
||||
'.c600': data[600],
|
||||
'.c700': data[700],
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
|
||||
'.inverse': data['inverse'],
|
||||
};
|
||||
|
||||
Object.keys(swaps).forEach( swap => {
|
||||
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
||||
targets.forEach( target => {
|
||||
target.innerHTML = swaps[swap];
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Update CSS Styles
|
||||
const innerStyles = `
|
||||
[data-theme="generated"] {
|
||||
--h4-color: ${data[700]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[700]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) [data-theme="generated"] {
|
||||
--h4-color: ${data[400]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] [data-theme="generated"] {
|
||||
--h4-color: ${data[500]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
[data-theme="generated"] {
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
}`;
|
||||
|
||||
document.querySelector('style[title="color-picker"]').innerHTML =
|
||||
this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
},
|
||||
|
||||
// Minify CSS
|
||||
minifyCSS(css) {
|
||||
return css.replace(/^ +/gm, '');
|
||||
},
|
||||
|
||||
// Hexadecimal to Rgba
|
||||
hexToRgbA(hex, alpha) {
|
||||
let c;
|
||||
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
||||
c = hex.substring(1).split('');
|
||||
if (c.length == 3) {
|
||||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||
}
|
||||
c = '0x' + c.join('');
|
||||
return (
|
||||
'rgba(' +
|
||||
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
|
||||
', ' +
|
||||
alpha +
|
||||
')'
|
||||
);
|
||||
}
|
||||
throw new Error('Bad Hex');
|
||||
},
|
||||
};
|
||||
|
||||
export default colorPicker;
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
// Source: https://material.io/design/color/the-color-system.html
|
||||
export const materialDesignColors = {
|
||||
red: {
|
||||
50: '#ffebee',
|
||||
100: '#ffcdd2',
|
||||
200: '#ef9a9a',
|
||||
300: '#e57373',
|
||||
400: '#ef5350',
|
||||
500: '#f44336',
|
||||
600: '#e53935',
|
||||
700: '#d32f2f',
|
||||
800: '#c62828',
|
||||
900: '#b71c1c',
|
||||
a100: '#ff8a80',
|
||||
a200: '#ff5252',
|
||||
a400: '#ff1744',
|
||||
a700: '#d50000',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
pink: {
|
||||
50: '#fce4ec',
|
||||
100: '#f8bbd0',
|
||||
200: '#f48fb1',
|
||||
300: '#f06292',
|
||||
400: '#ec407a',
|
||||
500: '#e91e63',
|
||||
600: '#d81b60',
|
||||
700: '#c2185b',
|
||||
800: '#ad1457',
|
||||
900: '#880e4f',
|
||||
a100: '#ff80ab',
|
||||
a200: '#ff4081',
|
||||
a400: '#f50057',
|
||||
a700: '#c51162',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
purple: {
|
||||
50: '#f3e5f5',
|
||||
100: '#e1bee7',
|
||||
200: '#ce93d8',
|
||||
300: '#ba68c8',
|
||||
400: '#ab47bc',
|
||||
500: '#9c27b0',
|
||||
600: '#8e24aa',
|
||||
700: '#7b1fa2',
|
||||
800: '#6a1b9a',
|
||||
900: '#4a148c',
|
||||
a100: '#ea80fc',
|
||||
a200: '#e040fb',
|
||||
a400: '#d500f9',
|
||||
a700: '#aa00ff',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'deep-purple': {
|
||||
50: '#ede7f6',
|
||||
100: '#d1c4e9',
|
||||
200: '#b39ddb',
|
||||
300: '#9575cd',
|
||||
400: '#7e57c2',
|
||||
500: '#673ab7',
|
||||
600: '#5e35b1',
|
||||
700: '#512da8',
|
||||
800: '#4527a0',
|
||||
900: '#311b92',
|
||||
a100: '#b388ff',
|
||||
a200: '#7c4dff',
|
||||
a400: '#651fff',
|
||||
a700: '#6200ea',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
indigo: {
|
||||
50: '#e8eaf6',
|
||||
100: '#c5cae9',
|
||||
200: '#9fa8da',
|
||||
300: '#7986cb',
|
||||
400: '#5c6bc0',
|
||||
500: '#3f51b5',
|
||||
600: '#3949ab',
|
||||
700: '#303f9f',
|
||||
800: '#283593',
|
||||
900: '#1a237e',
|
||||
a100: '#8c9eff',
|
||||
a200: '#536dfe',
|
||||
a400: '#3d5afe',
|
||||
a700: '#304ffe',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
blue: {
|
||||
50: '#e3f2fd',
|
||||
100: '#bbdefb',
|
||||
200: '#90caf9',
|
||||
300: '#64b5f6',
|
||||
400: '#42a5f5',
|
||||
500: '#2196f3',
|
||||
600: '#1e88e5',
|
||||
700: '#1976d2',
|
||||
800: '#1565c0',
|
||||
900: '#0d47a1',
|
||||
a100: '#82b1ff',
|
||||
a200: '#448aff',
|
||||
a400: '#2979ff',
|
||||
a700: '#2962ff',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'light-blue': {
|
||||
50: '#e1f5fe',
|
||||
100: '#b3e5fc',
|
||||
200: '#81d4fa',
|
||||
300: '#4fc3f7',
|
||||
400: '#29b6f6',
|
||||
500: '#03a9f4',
|
||||
600: '#039be5',
|
||||
700: '#0288d1',
|
||||
800: '#0277bd',
|
||||
900: '#01579b',
|
||||
a100: '#80d8ff',
|
||||
a200: '#40c4ff',
|
||||
a400: '#00b0ff',
|
||||
a700: '#0091ea',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
cyan: {
|
||||
50: '#e0f7fa',
|
||||
100: '#b2ebf2',
|
||||
200: '#80deea',
|
||||
300: '#4dd0e1',
|
||||
400: '#26c6da',
|
||||
500: '#00bcd4',
|
||||
600: '#00acc1',
|
||||
700: '#0097a7',
|
||||
800: '#00838f',
|
||||
900: '#006064',
|
||||
a100: '#84ffff',
|
||||
a200: '#18ffff',
|
||||
a400: '#00e5ff',
|
||||
a700: '#00b8d4',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
teal: {
|
||||
50: '#e0f2f1',
|
||||
100: '#b2dfdb',
|
||||
200: '#80cbc4',
|
||||
300: '#4db6ac',
|
||||
400: '#26a69a',
|
||||
500: '#009688',
|
||||
600: '#00897b',
|
||||
700: '#00796b',
|
||||
800: '#00695c',
|
||||
900: '#004d40',
|
||||
a100: '#a7ffeb',
|
||||
a200: '#64ffda',
|
||||
a400: '#1de9b6',
|
||||
a700: '#00bfa5',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
green: {
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50',
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
a100: '#b9f6ca',
|
||||
a200: '#69f0ae',
|
||||
a400: '#00e676',
|
||||
a700: '#00c853',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'light-green': {
|
||||
50: '#f1f8e9',
|
||||
100: '#dcedc8',
|
||||
200: '#c5e1a5',
|
||||
300: '#aed581',
|
||||
400: '#9ccc65',
|
||||
500: '#8bc34a',
|
||||
600: '#7cb342',
|
||||
700: '#689f38',
|
||||
800: '#558b2f',
|
||||
900: '#33691e',
|
||||
a100: '#ccff90',
|
||||
a200: '#b2ff59',
|
||||
a400: '#76ff03',
|
||||
a700: '#64dd17',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
lime: {
|
||||
50: '#f9fbe7',
|
||||
100: '#f0f4c3',
|
||||
200: '#e6ee9c',
|
||||
300: '#dce775',
|
||||
400: '#d4e157',
|
||||
500: '#cddc39',
|
||||
600: '#c0ca33',
|
||||
700: '#afb42b',
|
||||
800: '#9e9d24',
|
||||
900: '#827717',
|
||||
a100: '#f4ff81',
|
||||
a200: '#eeff41',
|
||||
a400: '#c6ff00',
|
||||
a700: '#aeea00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
yellow: {
|
||||
50: '#fffde7',
|
||||
100: '#fff9c4',
|
||||
200: '#fff59d',
|
||||
300: '#fff176',
|
||||
400: '#ffee58',
|
||||
500: '#ffeb3b',
|
||||
600: '#fdd835',
|
||||
700: '#fbc02d',
|
||||
800: '#f9a825',
|
||||
900: '#f57f17',
|
||||
a100: '#ffff8d',
|
||||
a200: '#ffff00',
|
||||
a400: '#ffea00',
|
||||
a700: '#ffd600',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
amber: {
|
||||
50: '#fff8e1',
|
||||
100: '#ffecb3',
|
||||
200: '#ffe082',
|
||||
300: '#ffd54f',
|
||||
400: '#ffca28',
|
||||
500: '#ffc107',
|
||||
600: '#ffb300',
|
||||
700: '#ffa000',
|
||||
800: '#ff8f00',
|
||||
900: '#ff6f00',
|
||||
a100: '#ffe57f',
|
||||
a200: '#ffd740',
|
||||
a400: '#ffc400',
|
||||
a700: '#ffab00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
orange: {
|
||||
50: '#fff3e0',
|
||||
100: '#ffe0b2',
|
||||
200: '#ffcc80',
|
||||
300: '#ffb74d',
|
||||
400: '#ffa726',
|
||||
500: '#ff9800',
|
||||
600: '#fb8c00',
|
||||
700: '#f57c00',
|
||||
800: '#ef6c00',
|
||||
900: '#e65100',
|
||||
a100: '#ffd180',
|
||||
a200: '#ffab40',
|
||||
a400: '#ff9100',
|
||||
a700: '#ff6d00',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'deep-orange': {
|
||||
50: '#fbe9e7',
|
||||
100: '#ffccbc',
|
||||
200: '#ffab91',
|
||||
300: '#ff8a65',
|
||||
400: '#ff7043',
|
||||
500: '#ff5722',
|
||||
600: '#f4511e',
|
||||
700: '#e64a19',
|
||||
800: '#d84315',
|
||||
900: '#bf360c',
|
||||
a100: '#ff9e80',
|
||||
a200: '#ff6e40',
|
||||
a400: '#ff3d00',
|
||||
a700: '#dd2c00',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
grey: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5',
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
600: '#757575',
|
||||
700: '#616161',
|
||||
800: '#424242',
|
||||
900: '#212121',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'blue-grey': {
|
||||
50: '#eceff1',
|
||||
100: '#cfd8dc',
|
||||
200: '#b0bec5',
|
||||
300: '#90a4ae',
|
||||
400: '#78909c',
|
||||
500: '#607d8b',
|
||||
600: '#546e7a',
|
||||
700: '#455a64',
|
||||
800: '#37474f',
|
||||
900: '#263238',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
};
|
||||
|
||||
export default materialDesignColors;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
/*
|
||||
* Theme switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
change: {
|
||||
light: '<i>Turn on dark mode</i>',
|
||||
dark: '<i>Turn off dark mode</i>',
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
localStorageKey: 'picoPreferredColorScheme',
|
||||
|
||||
// Init
|
||||
init() {
|
||||
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;
|
||||
},
|
||||
|
||||
// Preferred color scheme
|
||||
get preferredColorScheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
},
|
||||
|
||||
// Init switchers
|
||||
initSwitchers() {
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
|
||||
}, false);
|
||||
});
|
||||
},
|
||||
|
||||
// Add new button
|
||||
addButton(config) {
|
||||
let button = document.createElement(config.tag);
|
||||
button.className = config.class;
|
||||
document.querySelector(config.target).appendChild(button);
|
||||
},
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
if (scheme == 'auto') {
|
||||
this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
|
||||
}
|
||||
else if (scheme == 'dark' || scheme == 'light') {
|
||||
this._scheme = scheme;
|
||||
}
|
||||
this.applyScheme();
|
||||
this.schemeToLocalStorage();
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(
|
||||
button => {
|
||||
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
// Store scheme to local storage
|
||||
schemeToLocalStorage() {
|
||||
if (typeof window.localStorage !== 'undefined') {
|
||||
window.localStorage.setItem(this.localStorageKey, this.scheme);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default themeSwitcher;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* Toggle navigation
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const toggleNavigation = {
|
||||
|
||||
// Config
|
||||
_state: 'closed-on-mobile',
|
||||
toggleLink: document.getElementById('toggle-docs-navigation'),
|
||||
nav: document.querySelector('main > aside > nav'),
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.onToggleClick()
|
||||
},
|
||||
|
||||
onToggleClick() {
|
||||
this.toggleLink.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
this.state == 'closed-on-mobile'
|
||||
? this.state = 'open'
|
||||
: this.state = 'closed-on-mobile';
|
||||
this.nav.removeAttribute('class');
|
||||
this.nav.classList.add(this.state);
|
||||
}, false);
|
||||
},
|
||||
|
||||
// Get state
|
||||
get state() {
|
||||
return this._state;
|
||||
},
|
||||
|
||||
// Set state
|
||||
set state(state) {
|
||||
this._state = state;
|
||||
},
|
||||
};
|
||||
|
||||
export default toggleNavigation;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* Docs: Modal
|
||||
*/
|
||||
|
||||
dialog.example {
|
||||
display: block;
|
||||
z-index: inherit;
|
||||
position: relative;
|
||||
top: inherit;
|
||||
right: inherit;
|
||||
bottom: inherit;
|
||||
left: inherit;
|
||||
align-items: inherit;
|
||||
justify-content: inherit;
|
||||
width: inherit;
|
||||
min-width: inherit;
|
||||
height: inherit;
|
||||
min-height: inherit;
|
||||
padding: 0;
|
||||
background-color:inherit;
|
||||
|
||||
article {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
&:not([open]),
|
||||
&[open=false] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-is-open body > button {
|
||||
filter: blur(0.125rem);
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* Docs: Navs
|
||||
*/
|
||||
|
||||
body > nav {
|
||||
--nav-link-spacing-vertical: 1rem;
|
||||
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: var(--nav-background-color);
|
||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||
|
||||
&.container-fluid {
|
||||
padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
// Band & Title
|
||||
ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
|
||||
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: calc(var(--spacing) * 1.5);
|
||||
color: var(--h1-color);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Docs: Theme switcher
|
||||
*/
|
||||
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));
|
||||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 0.15rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
currentColor 0%,
|
||||
currentColor 50%,
|
||||
transparent 50%
|
||||
);
|
||||
content: "";
|
||||
vertical-align: bottom;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-style: normal;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
max-width: 100%;
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
* Docs: Code
|
||||
*/
|
||||
|
||||
// Code block inside article
|
||||
article > footer.code {
|
||||
background: var(--article-code-background-color);
|
||||
}
|
||||
article pre,
|
||||
article pre code {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Code block outside article
|
||||
// Horizontally aligned with <article> content
|
||||
section > pre {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5)
|
||||
var(--block-spacing-horizontal);
|
||||
background: var(--article-code-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
// Badge for Valid & Invalid code
|
||||
[data-theme="invalid"],
|
||||
[data-theme="valid"] {
|
||||
position: relative;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
// Label
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0;
|
||||
color: var(--primary-inverse);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
top: var(--spacing);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing for Valid & Invalid badge
|
||||
code {
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
|
||||
var(--block-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
// Color for Valid & Invalid code
|
||||
[data-theme="invalid"] {
|
||||
&:before {
|
||||
background: var(--invalid-color);
|
||||
content: "Not so great";
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="valid"] {
|
||||
&:before {
|
||||
background: var(--valid-color);
|
||||
content: "Great";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* Docs: Typography
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
[role="document"] {
|
||||
section > h1,
|
||||
section > h2,
|
||||
section > h3 {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
* Docs: Aside
|
||||
*/
|
||||
|
||||
main > aside {
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
padding-bottom: var(--block-spacing-vertical);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
a#toggle-docs-navigation {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
svg {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-on-mobile {
|
||||
|
||||
a#toggle-docs-navigation {
|
||||
svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
a#toggle-docs-navigation {
|
||||
svg.expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
padding-bottom: 0;
|
||||
|
||||
summary {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
li,
|
||||
summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
li a {
|
||||
--nav-link-spacing-vertical: 0.25rem;
|
||||
--nav-link-spacing-horizontal: 0.75rem;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
a.secondary:focus {
|
||||
background-color: transparent;
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
a[aria-current],
|
||||
a[aria-current]:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
details {
|
||||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
color: var(--h1-color);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not([role=button], :focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Docs: Document
|
||||
*/
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
/**
|
||||
* Docs: Documentation
|
||||
*/
|
||||
|
||||
// Docs: Themes
|
||||
#themes {
|
||||
button.theme-switcher {
|
||||
&:first-of-type {
|
||||
--font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Customization
|
||||
#customization {
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
~ article {
|
||||
margin-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.picked {
|
||||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-size: 0.66rem auto;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&[data-color="lime"],
|
||||
&[data-color="yellow"],
|
||||
&[data-color="amber"] {
|
||||
&.picked {
|
||||
background-image: var(--icon-check-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
pre[data-theme="generated"] {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Grid
|
||||
#grid {
|
||||
--grid-spacing-vertical: 1rem;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
> * {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--code-background-color);
|
||||
font-size: 87.5%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Buttons
|
||||
#buttons {
|
||||
a[role="button"] {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Forms
|
||||
#forms div.grid {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
|
||||
// Docs: Modal
|
||||
#modal {
|
||||
button {
|
||||
--font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* Docs: Main (Grid)
|
||||
*/
|
||||
|
||||
// Config
|
||||
$navHeight: 3.5rem;
|
||||
|
||||
// Main grid
|
||||
body > main {
|
||||
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
> aside,
|
||||
div[role="document"] {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// External links
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after
|
||||
{
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-size: 0.66rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Embedded SVG
|
||||
svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*!
|
||||
* Pico: Customs styles for Docs
|
||||
*/
|
||||
|
||||
// Config
|
||||
@import "../../scss/variables";
|
||||
|
||||
// Theming
|
||||
@import "themes/docs";
|
||||
|
||||
// Layout
|
||||
@import "layout/document";
|
||||
@import "layout/main";
|
||||
@import "layout/aside";
|
||||
@import "layout/documentation";
|
||||
|
||||
// Content
|
||||
@import "content/typography";
|
||||
@import "content/code";
|
||||
|
||||
// Components
|
||||
@import "components/modal";
|
||||
@import "components/nav";
|
||||
@import "components/theme-switcher";
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Theme: Additions for docs
|
||||
*/
|
||||
|
||||
@import "../../../scss/themes/default/colors";
|
||||
@import "docs/icons";
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
@import "docs/light";
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@import "docs/dark";
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@include dark;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// Dark theme [Additions for docs]
|
||||
@mixin dark {
|
||||
--invalid-color: #{rgba($red-900, 0.5)};
|
||||
--valid-color: #{rgba($green-800, 0.5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "../../../../scss/functions";
|
||||
|
||||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
:root {
|
||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($black, 0.75)}' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Light theme (Default) [Additions for docs]
|
||||
// Can be forced with data-theme="light"
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--invalid-color: #{$red-800};
|
||||
--valid-color: #{$green-700};
|
||||
--nav-background-color: #{rgba($white, 0.7)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{$white};
|
||||
--article-code-background-color: #{mix($grey-50, $white, 33%)};
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<footer>
|
||||
<hr>
|
||||
<p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>${props.title} • Pico CSS</title>
|
||||
<meta name="description" content="${props.description}">
|
||||
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||
<link rel="stylesheet" href="../css/pico.min.css">
|
||||
<link rel="stylesheet" href="css/pico.docs.min.css">
|
||||
<link rel="canonical" href="https://picocss.com/docs/${props.canonical}">
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<nav class="container-fluid">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://picocss.com" aria-label="Back home">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
|
||||
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>Documentation</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
|
||||
<li><a href="./" class="secondary">Docs</a></li>
|
||||
<li>
|
||||
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
|
||||
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<aside>
|
||||
<nav class="closed-on-mobile">
|
||||
<a href="./" class="secondary" id="toggle-docs-navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
|
||||
</svg>
|
||||
Table of contents
|
||||
</a>
|
||||
<details>
|
||||
<summary>Getting started</summary>
|
||||
<ul>
|
||||
<li><a href="./" id="start-link" class="secondary">Usage</a></li>
|
||||
<li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li>
|
||||
<li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li>
|
||||
<li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li>
|
||||
<li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Layout</summary>
|
||||
<ul>
|
||||
<li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li>
|
||||
<li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li>
|
||||
<li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Elements</summary>
|
||||
<ul>
|
||||
<li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li>
|
||||
<li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li>
|
||||
<li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li>
|
||||
<li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Components</summary>
|
||||
<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>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Utilities</summary>
|
||||
<ul>
|
||||
<li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li>
|
||||
<li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Extend</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</nav>
|
||||
<script>
|
||||
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||
const parentAccordion = activeLink.closest('details');
|
||||
activeLink.setAttribute('aria-current', 'page');
|
||||
parentAccordion.setAttribute('open', 'true');
|
||||
</script>
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Accordions"
|
||||
description="Toggle sections of content in pure HTML, without JavaScript."
|
||||
canonical="accordions.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="accordions-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="accordions">
|
||||
<hgroup>
|
||||
<h1>Accordions</h1>
|
||||
<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Accordions examples">
|
||||
<details>
|
||||
<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>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>
|
||||
<li>Quisque sed eros non eros ornare elementum.</li>
|
||||
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
||||
</ul>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>details</b>>
|
||||
<<b>summary</b>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<<b>details</b> <i>open</i>>
|
||||
<<b>summary</b>>Accordion 2</<b>summary</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code><<b>summary</b>></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><!-- Primary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Secondary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Accordion 2</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Contrast --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Accordion 3</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Buttons"
|
||||
description="The essential button in pure HTML, without .classes for the default style."
|
||||
canonical="buttons.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="buttons-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="buttons">
|
||||
<hgroup>
|
||||
<h1>Buttons</h1>
|
||||
<h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Button example">
|
||||
<button aria-label="Button">Button</button>
|
||||
<input type="submit">
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
|
||||
<article aria-label="Inline buttons examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<p>ℹ️ 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>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>And a classic <code>.outline</code> variant.</p>
|
||||
<article aria-label="Outline style examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Cards"
|
||||
description="A flexible container with graceful spacings across devices and viewports."
|
||||
canonical="cards.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="cards-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="cards">
|
||||
<hgroup>
|
||||
<h1>Cards</h1>
|
||||
<h2>A flexible container with graceful spacings across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Card example">
|
||||
I'm a card!
|
||||
</article>
|
||||
<pre><code><<b>article</b>>I'm a card!</<b>article</b>></code></pre>
|
||||
<p>You can use <code><<b>header</b>></code> and footer <code><<b>footer</b>></code> inside <code><<b>article</b>></code></p>
|
||||
<article aria-label="Card sectioning example">
|
||||
<header>Header</header>
|
||||
Body
|
||||
<footer>Footer</footer>
|
||||
</article>
|
||||
|
||||
<pre><code><<b>article</b>>
|
||||
<<b>header</b>>Header</<b>header</b>>
|
||||
Body
|
||||
<<b>footer</b>>Footer</<b>footer</b>>
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Class-less version"
|
||||
description="For wild HTML purists, Pico provides a .classless version."
|
||||
canonical="classless.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="classless-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="classless">
|
||||
<hgroup>
|
||||
<h1>Class-less version</h1>
|
||||
<h2>For wild HTML purists!</h2>
|
||||
</hgroup>
|
||||
<p>Pico provides a <code>.classless</code> version (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless">example</a>).</p>
|
||||
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>
|
||||
|
||||
<pre><code><em>// Containers</em>
|
||||
<b>body</b> > <b>header</b>,
|
||||
<b>body</b> > <b>main</b>,
|
||||
<b>body</b> > <b>footer</b> {
|
||||
<em>…</em>
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p><strong>Usage:</strong></p>
|
||||
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>></code></pre>
|
||||
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>></code></pre>
|
||||
<p>These <code>.classless</code> versions are also available on <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a>:</p>
|
||||
|
||||
<pre><code><em>// Centered viewport</em>
|
||||
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"</u>>
|
||||
</code></pre>
|
||||
|
||||
<pre><code><em>// Fluid viewport</em>
|
||||
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css"</u>>
|
||||
</code></pre>
|
||||
|
||||
<p>If you need to customize the default parent (<code><<b>body</b>></code>) for <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code>, you can recompile Pico by defining another CSS selector.</p>
|
||||
<p>Useful for <a href="https://reactjs.org/">React</a>, <a href="https://www.gatsbyjs.com/">Gatsby</a> or <a href="https://nextjs.org/">Next.js</a>.</p>
|
||||
|
||||
<pre><code><em>/* Custom Class-less version for React */</em>
|
||||
|
||||
<em>// Set the root element</em>
|
||||
<i>$semantic-root-element</i>: <u>"#root"</u>;
|
||||
|
||||
<em>// Enable <header>, <main>, <footer> inside $semantic-root-element as containers</em>
|
||||
<i>$enable-semantic-container</i>: <u>true</u>;
|
||||
|
||||
<em>// Enable .classes</em>
|
||||
<i>$enable-classes</i>: <u>false</u>;
|
||||
|
||||
<em>// Import Pico</em>
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
|
||||
|
||||
<p>The code above will compile Pico with the containers defined like this:</p>
|
||||
|
||||
<pre><code><em>// Containers</em></em>
|
||||
<i>#root</i> > <b>header</b>,
|
||||
<i>#root</i> > <b>main</b>,
|
||||
<i>#root</i> > <b>footer</b> {
|
||||
<em>…</em>
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Containers"
|
||||
description=".container enable a centered viewport, .container-fluid enable a 100% layout."
|
||||
canonical="containers.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="containers-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="containers">
|
||||
<hgroup>
|
||||
<h1>Containers</h1>
|
||||
<h2>
|
||||
<code>.container</code> enable a centered viewport.<br>
|
||||
<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
|
||||
</h2>
|
||||
</hgroup>
|
||||
|
||||
<pre><code><<b>body</b>>
|
||||
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||
</<b>body</b>></code></pre>
|
||||
|
||||
<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Extra small</th>
|
||||
<th>Small</th>
|
||||
<th>Medium</th>
|
||||
<th>Large</th>
|
||||
<th>Extra large</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Breakpoint</th>
|
||||
<td><576<small>px</small></td>
|
||||
<td>≥576<small>px</small></td>
|
||||
<td>≥768<small>px</small></td>
|
||||
<td>≥992<small>px</small></td>
|
||||
<td>≥1200<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Viewport</th>
|
||||
<td>100<small>%</small></td>
|
||||
<td>540<small>px</small></td>
|
||||
<td>720<small>px</small></td>
|
||||
<td>960<small>px</small></td>
|
||||
<td>1140<small>px</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct children of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||
<p><code><<b>section</b>></code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Customization"
|
||||
description="You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."
|
||||
canonical="customization.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="customization-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="customization">
|
||||
<hgroup>
|
||||
<h1>Customization</h1>
|
||||
<h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
|
||||
</hgroup>
|
||||
<p>Example: <strong>pick a color!</strong></p>
|
||||
|
||||
<article data-theme="generated" aria-label="Generated theme example">
|
||||
<h3><span class="name">Custom theme</span></h3>
|
||||
<form>
|
||||
<div class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<label for="remember">
|
||||
<input type="checkbox" role="switch" id="remember" name="remember" checked>
|
||||
Remember me
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em>// Simplified example</em>
|
||||
<b>:root</b> {
|
||||
<i>--primary</i>: <u class="c600">…</u>;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>There are 2 ways to customize your version of Pico CSS:</p>
|
||||
<h3>Overriding CSS variables</h3>
|
||||
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
|
||||
/* Can be forced with data-theme="light" */</em>
|
||||
<b>[data-theme=<u>"light"</u>]</b>,
|
||||
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||
<i>--primary</i>: <u class="c600">…</u>;
|
||||
<i>--primary-hover</i>: <u class="c700">…</u>;
|
||||
<i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
|
||||
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||
}
|
||||
|
||||
<em>/* <span class="name"></span>Dark scheme (Auto) */
|
||||
/* Automatically enabled if user has Dark mode enabled */</em>
|
||||
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||
<b>:root:not([data-theme])</b> {
|
||||
<i>--primary</i>: <u class="c600">…</u>;
|
||||
<i>--primary-hover</i>: <u class="c500">…</u>;
|
||||
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
|
||||
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||
}
|
||||
}
|
||||
|
||||
<em>/* <span class="name"></span>Dark scheme (Forced) */
|
||||
/* Enabled if forced with data-theme="dark" */</em>
|
||||
<b>[data-theme=<u>"dark"</u>]</b> {
|
||||
<i>--primary</i>: <u class="c600">…</u>;
|
||||
<i>--primary-hover</i>: <u class="c500">…</u>;
|
||||
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
|
||||
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||
}
|
||||
|
||||
<em>/* <span class="name"></span>(Common styles) */</em>
|
||||
<b>:root</b> {
|
||||
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
|
||||
<i>--form-element-focus-color</i>: <u>var</u>(<i>--primary-focus</i>);
|
||||
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
|
||||
<i>--switch-checked-background-color</i>: <u>var</u>(<i>--primary</i>);
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
|
||||
<h3>Importing Pico SASS library</h3>
|
||||
<p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
||||
<em>// Override default variables</em>
|
||||
<i>$primary-500</i>: <u class="c500">…</u>;
|
||||
<i>$primary-600</i>: <u class="c600">…</u>;
|
||||
<i>$primary-700</i>: <u class="c700">…</u>;
|
||||
|
||||
<em>// Import Pico</em>
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
|
||||
|
||||
<p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
|
||||
|
||||
<pre><code><em>/* Custom version */</em>
|
||||
|
||||
<em>// Custom theme</em>
|
||||
<b>@import</b> <u>"path/themes/custom"</u>;
|
||||
|
||||
<em>// Import needed components</em>
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/document"</u>;
|
||||
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/sectioning"</u>;
|
||||
<em>…</em>
|
||||
</code></pre>
|
||||
|
||||
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
<script src="js/customization.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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><<b>details</b> <i>role</i>=<u>"list"</u>></code> as a wrapper and <code><<b>summary</b>></code> and <code><<b>ul</b>></code> as direct children.</p>
|
||||
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><select></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><!-- Dropdown --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Select --></em>
|
||||
<<b>select</b></u>>
|
||||
<<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>>Select</<b>option</b>>
|
||||
<<b>option</b>>…</<b>option</b>>
|
||||
</<b>select</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>summary</b> <i>role</i>=<u>"button"</u>></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><!-- Primary --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>
|
||||
Dropdown as a button 1
|
||||
</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Secondary --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>
|
||||
Dropdown as a button 2
|
||||
</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Contrast --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>
|
||||
Dropdown as a button 3
|
||||
</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Dropdowns can be used as custom selects with <code><<b>input</b> <i>type</i>=<u>"radio"</u>></code> or <code><<b>input</b> <i>type</i>=<u>"checkbox"</u>></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><!-- With radio buttons --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
||||
<<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>>
|
||||
Small
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
||||
<<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>>
|
||||
Medium
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
||||
<<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>>
|
||||
Large
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- With checkboxes --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||
Banana
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||
Watermelon
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>label</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||
Apple
|
||||
</<b>label</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><<b>details</b> <i>role</i>=<u>"list"</u>></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><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></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><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can also use <code><<b>li</b> <i>role</i>=<u>"list"</u>></code> as a nested wrapper to render a list as a dropdown.</p>
|
||||
<p>ℹ️ 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><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>a</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Forms"
|
||||
description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
|
||||
canonical="forms.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="forms-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="forms">
|
||||
<hgroup>
|
||||
<h1>Forms</h1>
|
||||
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All native form elements are fully customizable and themeable with CSS variables.</p>
|
||||
<article aria-label="Form example">
|
||||
<form>
|
||||
<div class="grid">
|
||||
<label for="firstname">
|
||||
First name
|
||||
<input type="text" id="firstname" name="firstname" placeholder="First name" required>
|
||||
</label>
|
||||
<label for="lastname">
|
||||
Last name
|
||||
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
|
||||
</label>
|
||||
</div>
|
||||
<label for="email">Email address</label>
|
||||
<input type="email" id="email" name="email" placeholder="Email address" required>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>form</b>>
|
||||
|
||||
<em><!-- Grid --></em>
|
||||
<<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||
|
||||
<em><!-- Markup example 1: input is inside label --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"firstname"</u>>
|
||||
First name
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>>
|
||||
</<b>label</b>>
|
||||
|
||||
<<b>label</b> <i>for</i>=<u>"lastname"</u>>
|
||||
Last name
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>>
|
||||
</<b>label</b>>
|
||||
|
||||
</<b>div</b>>
|
||||
|
||||
<em><!-- Markup example 2: input is after label --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"email"</u>>Email address</<b>label</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>>
|
||||
<<b>small</b>>We'll never share your email with anyone else.</<b>small</b>>
|
||||
|
||||
<em><!-- Button --></em>
|
||||
<<b>button</b> <i>type</i>=<u>"submit"</u>>Submit</<b>button</b>>
|
||||
|
||||
</<b>form</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Disabled and validation states:</p>
|
||||
<article aria-label="Validation states examples">
|
||||
<form class="grid">
|
||||
<input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
|
||||
<input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true">
|
||||
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
|
||||
<input type="text" value="Readonly" aria-label="Readonly" readonly>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
|
||||
<article aria-label="Select, radios, checkboxes, switch examples">
|
||||
<label for="fruit">Fruit</label>
|
||||
<select id="fruit" required>
|
||||
<option value="" selected>Select a fruit…</option>
|
||||
<option>Banana</option>
|
||||
<option>Watermelon</option>
|
||||
<option>Apple</option>
|
||||
<option>Orange</option>
|
||||
<option>Mango</option>
|
||||
</select>
|
||||
<fieldset>
|
||||
<legend>Size</legend>
|
||||
<label for="small">
|
||||
<input type="radio" id="small" name="size" value="small" checked>
|
||||
Small
|
||||
</label>
|
||||
<label for="medium">
|
||||
<input type="radio" id="medium" name="size" value="medium">
|
||||
Medium
|
||||
</label>
|
||||
<label for="large">
|
||||
<input type="radio" id="large" name="size" value="large">
|
||||
Large
|
||||
</label>
|
||||
<label for="extralarge">
|
||||
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
|
||||
Extra Large
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="terms">
|
||||
<input type="checkbox" id="terms" name="terms">
|
||||
I agree to the Terms and Conditions
|
||||
</label>
|
||||
<label for="terms_sharing">
|
||||
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
|
||||
I agree to share my information with partners
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="switch">
|
||||
<input type="checkbox" id="switch" name="switch" role="switch">
|
||||
Publish on my profile
|
||||
</label>
|
||||
<label for="switch_disabled">
|
||||
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
||||
User must change password at next logon
|
||||
</label>
|
||||
</fieldset>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Select --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
||||
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
||||
<<b>option</b>>…</<b>option</b>>
|
||||
</<b>select</b>>
|
||||
|
||||
<em><!-- Radios --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>legend</b>>Size</<b>legend</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
||||
<<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> <i>checked</i>>
|
||||
Small
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
||||
<<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>>
|
||||
Medium
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
||||
<<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>>
|
||||
Large
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
||||
Extra Large
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Checkboxes --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||
I agree to the Terms and Conditions
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms_sharing"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>>
|
||||
I agree to share my information with partners
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<em><!-- Switches --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||
Publish on my profile
|
||||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||
User must change password at next logon
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<article aria-label="Indeterminate checkbox example">
|
||||
<label for="indeterminate-checkbox">
|
||||
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
||||
Select all
|
||||
</label>
|
||||
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Others input types:</p>
|
||||
<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>
|
||||
<label for="range">Range slider
|
||||
<input type="range" min="0" max="100" value="50" id="range" name="range">
|
||||
</label>
|
||||
<label for="date">Date
|
||||
<input type="date" id="date" name="date">
|
||||
</label>
|
||||
<label for="time">Time
|
||||
<input type="time" id="time" name="time">
|
||||
</label>
|
||||
<label for="color">Color
|
||||
<input type="color" id="color" name="color" value="#0eaaaa">
|
||||
</label>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Search --></em>
|
||||
<<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>>
|
||||
|
||||
<!-- File browser --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
||||
</<b>label</b>>
|
||||
|
||||
<em><!-- Range slider --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"range"</u>>Range slider
|
||||
<<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>>
|
||||
</<b>label</b>>
|
||||
|
||||
<em><!-- Date --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"date"</u>>Date
|
||||
<<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>>
|
||||
</<b>label</b>>
|
||||
|
||||
<em><!-- Time --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"time"</u>>Time
|
||||
<<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>>
|
||||
</<b>label</b>>
|
||||
|
||||
<em><!-- Color --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"color"</u>>Color
|
||||
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
||||
</<b>label</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Grid"
|
||||
description=".grid enable a minimal grid system with auto-layout columns."
|
||||
canonical="grid.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="grid-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="grid">
|
||||
<hgroup>
|
||||
<h1>Grid</h1>
|
||||
<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Grid example">
|
||||
<div class="grid">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||
<<b>div</b>>1</<b>div</b>>
|
||||
<<b>div</b>>2</<b>div</b>>
|
||||
<<b>div</b>>3</<b>div</b>>
|
||||
<<b>div</b>>4</<b>div</b>>
|
||||
</<b>div</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||
<p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p>
|
||||
<details>
|
||||
<summary>
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
More about grids
|
||||
</summary>
|
||||
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
<script src="js/grid.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Documentation"
|
||||
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>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="start-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="start">
|
||||
<hgroup>
|
||||
<h1>Usage</h1>
|
||||
<h2>Works without package manager or dependencies 🙂!</h2>
|
||||
</hgroup>
|
||||
<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/tags/v1.5.9.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<h3>Install from CDN</h3>
|
||||
<p>Alternatively, you can use <a href="https://www.jsdelivr.com/package/npm/@picocss/pico">jsDelivr CDN</a> to link pico.css</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"</u>></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><!doctype html></em>
|
||||
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
||||
<<b>head</b>>
|
||||
<<b>meta</b> <i>charset</i>=<u>"utf-8"</u>>
|
||||
<<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1"</u>>
|
||||
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>>
|
||||
<<b>title</b>>Hello, world!</<b>title</b>>
|
||||
</<b>head</b>>
|
||||
<<b>body</b>>
|
||||
<<b>main</b> <i>class</i>=<u>"container"</u>>
|
||||
<<b>h1</b>>Hello, world!</<b>h1</b>>
|
||||
</<b>main</b>>
|
||||
</<b>body</b>>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Loading"
|
||||
description="aria-busy='true' enable a loading indicator."
|
||||
canonical="loading.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="loading-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="loading">
|
||||
<hgroup>
|
||||
<h1>Loading</h1>
|
||||
<h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Loading buttons example">
|
||||
<button aria-busy="true">Please wait…</button>
|
||||
<button aria-busy="true" class="secondary"></button>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>button</b> <i>aria-busy</i>=<u>"true"</u>>Please wait…</<b>button</b>>
|
||||
<<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>></<b>button</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>It can be applied to any block:</p>
|
||||
<article aria-busy="true"></article>
|
||||
<pre><code><<b>article</b> <i>aria-busy</i>=<u>"true"</u>></<b>article</b>></code></pre>
|
||||
<p>Or any text element:</p>
|
||||
<article aria-label="Loading paragraph example">
|
||||
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
|
||||
<footer class="code">
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>>Generating link, please wait…</<b>a</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Modal"
|
||||
description="A flexible container with graceful spacings across devices and viewports."
|
||||
canonical="modal.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="modal-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="modal">
|
||||
<hgroup>
|
||||
<h1>Modal</h1>
|
||||
<h2>The classic modal element with graceful spacings across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
|
||||
<p>Modals are built with <code><<b>dialog</b>></code> as a wrapper and <code><<b>article</b>></code> as a content container.</p>
|
||||
<p>Inside <code><<b>header</b>></code>, <code><<b>a</b> <i>class</i>=<u>"close"</u>></code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</p>
|
||||
|
||||
<dialog class="example" open>
|
||||
<article>
|
||||
<header>
|
||||
<a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
|
||||
<p>Modal title</p>
|
||||
</header>
|
||||
<p>
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||
</p>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<pre><code><<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<<b>header</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#close"</u> <i>aria-label</i>=<u>"Close"</u> <i>class</i>=<u>"close"</u>></<b>a</b>>
|
||||
Modal title
|
||||
</<b>header</b>>
|
||||
<<b>p</b>>
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||
</<b>p</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
<p>Inside <code><<b>footer</b>></code>, the content is right aligned by default.</p>
|
||||
|
||||
<dialog class="example" open>
|
||||
<article>
|
||||
<h3>Confirm your action!</h3>
|
||||
<p>
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Ut consectetur placerat pulvinar.
|
||||
</p>
|
||||
<footer>
|
||||
<a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<pre><code><<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Ut consectetur placerat pulvinar.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#cancel"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Cancel</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u> <i>role</i>=<u>"button"</u>>Confirm</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
<hgroup>
|
||||
<h2>Live demo</h2>
|
||||
<h3>Toggle a modal by clicking the button below.</h3>
|
||||
</hgroup>
|
||||
|
||||
<article>
|
||||
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
<em><!-- Modal --></em>
|
||||
<<b>dialog</b> <i>id</i>=<u>"modal-example"</u>>
|
||||
<<b>article</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#close"</u>
|
||||
<i>aria-label</i>=<u>"Close"</u>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Cras sit amet maximus risus.
|
||||
Pellentesque sodales odio sit amet augue finibus pellentesque.
|
||||
Nullam finibus risus non semper euismod.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#cancel"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal(event)"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</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 this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>.</p>
|
||||
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b></u>></code> container.</p>
|
||||
|
||||
<pre><code><em><!-- Open modal--></em>
|
||||
<<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<em>…</em>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>>
|
||||
|
||||
<em><!-- Modal closed --></em>
|
||||
<<b>dialog</b>>
|
||||
<<b>article</b>>
|
||||
<em>…</em>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>>
|
||||
</code></pre>
|
||||
|
||||
<h2>Utilities</h2>
|
||||
<p>Modals come with 3 utility classes.</p>
|
||||
<p>ℹ️ 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><!doctype html></em>
|
||||
<<b>html</b> <i>class</i>=<u>"modal-is-open"</u>>
|
||||
<em>…</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
<p><code>.modal-is-opening</code> brings an opening animation.</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-opening"</u>>
|
||||
<em>…</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
<p><code>.modal-is-closing</code> brings a closing animation.</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-closing"</u>>
|
||||
<em>…</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<dialog id="modal-example">
|
||||
<article>
|
||||
<a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
|
||||
<h3>Confirm your action!</h3>
|
||||
<p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
|
||||
<footer>
|
||||
<a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<script src="js/commons.min.js"></script>
|
||||
<script src="js/modal.min.js"></script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Navs"
|
||||
description="The essential navbar component in pure semantic HTML."
|
||||
canonical="navs.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="navs-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="navs">
|
||||
<hgroup>
|
||||
<h1>Navs</h1>
|
||||
<h2>The essential navbar component in pure semantic HTML.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Nav example">
|
||||
<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><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Button</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||
<article aria-label="Nav example">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12">
|
||||
</line><line x1="3" y1="6" x2="21" y2="6">
|
||||
</line><line x1="3" y1="18" x2="21" y2="18">
|
||||
</line>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><strong>Brand</strong></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||
<article aria-label="Vertical nav example">
|
||||
<aside>
|
||||
<nav>
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>aside</b>>
|
||||
<<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>>
|
||||
</<b>aside</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p>
|
||||
|
||||
<article aria-label="Breadcrumb example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Category</a>
|
||||
</li>
|
||||
<li>Page</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Home<<b>/a</b>><<b>/li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Category<<b>/a</b>><<b>/li</b>>
|
||||
<<b>li</b>>Page<<b>/li</b>>
|
||||
<<b>/ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Progress"
|
||||
description="Progress bar element in pure HTML, without JavaScript."
|
||||
canonical="progress.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="progress-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="progress">
|
||||
<hgroup>
|
||||
<h1>Progress</h1>
|
||||
<h2>Progress bar element in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Progress bar example">
|
||||
<progress value="25" max="100"></progress>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>></<b>progress</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>A progress bar without a <code><b>value</b></code> attribute is indeterminate.</p>
|
||||
<article aria-label="Indeterminate progress bar example">
|
||||
<progress></progress>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>progress</b>></<b>progress</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="RTL (Right-To-Left)"
|
||||
description="Support for right-to-left text in Pico with dir='rtl'"
|
||||
canonical="rtl.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="rtl-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="rtl">
|
||||
<hgroup>
|
||||
<h1>RTL</h1>
|
||||
<h2>Support for right-to-left text in Pico.</h2>
|
||||
</hgroup>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl">example</a>).</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
||||
<em>...</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
<p>ℹ️ The RTL feature is still experimental and will probably evolve.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Horizontal scroller"
|
||||
description="<figure> acts as a container to make any content scrollable horizontally."
|
||||
canonical="scroller.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="scroller-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="scroller">
|
||||
<hgroup>
|
||||
<h1>Horizontal scroller</h1>
|
||||
<h2><code><<b>figure</b>></code> acts as a container to make any content scrollable horizontally.</h2>
|
||||
</hgroup>
|
||||
<p>Useful to have responsive <code><<b>table</b>></code></p>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
|
||||
<pre><code><<b>figure</b>>
|
||||
<<b>table</b>>
|
||||
…
|
||||
</<b>table</b>>
|
||||
</<b>figure</b>></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Tables"
|
||||
description="Default styles for tables without .classes"
|
||||
canonical="tables.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="tables-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="tables">
|
||||
<hgroup>
|
||||
<h1>Tables</h1>
|
||||
<h2>Default styles for tables without <code>.classes</code></h2>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th scope="row">#</th>
|
||||
<td>Total</td>
|
||||
<td>Total</td>
|
||||
<td>Total</td>
|
||||
<td>Total</td>
|
||||
<td>Total</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</figure>
|
||||
|
||||
<pre><code><<b>table</b>>
|
||||
<<b>thead</b>>
|
||||
<<b>tr</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>#</<b>th</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||
</<b>tr</b>>
|
||||
</<b>thead</b>>
|
||||
<<b>tbody</b>>
|
||||
<<b>tr</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
</<b>tr</b>>
|
||||
<<b>tr</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
</<b>tr</b>>
|
||||
<<b>tr</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
<<b>td</b>>Cell</<b>td</b>>
|
||||
</<b>tr</b>>
|
||||
</<b>tbody</b>>
|
||||
<<b>tfoot</b>>
|
||||
<<b>tr</b>>
|
||||
<<b>th</b> <i>scope</i>=<u>"col"</u>>#</<b>th</b>>
|
||||
<<b>td</b> <i>scope</i>=<u>"col"</u>>Total</<b>td</b>>
|
||||
<<b>td</b> <i>scope</i>=<u>"col"</u>>Total</<b>td</b>>
|
||||
<<b>td</b> <i>scope</i>=<u>"col"</u>>Total</<b>td</b>>
|
||||
<<b>td</b> <i>scope</i>=<u>"col"</u>>Total</<b>td</b>>
|
||||
<<b>td</b> <i>scope</i>=<u>"col"</u>>Total</<b>td</b>>
|
||||
</<b>tr</b>>
|
||||
</<b>tfoot</b>>
|
||||
</<b>table</b>></code></pre>
|
||||
|
||||
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
|
||||
<pre><code><<b>table</b> <i>role</i>=<u>"grid"</u>>
|
||||
<em>…</em>
|
||||
</<b>table</b>></code></pre>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Themes"
|
||||
description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')."
|
||||
canonical="themes.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="themes-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="themes">
|
||||
<hgroup>
|
||||
<h1>Themes</h1>
|
||||
<h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
|
||||
</hgroup>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
|
||||
<article aria-label="Theme switcher">
|
||||
<button class="contrast theme-switcher">…</button>
|
||||
</article>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code></p>
|
||||
<article data-theme="light" aria-label="Forced light theme example">
|
||||
<h3>Light theme</h3>
|
||||
<form class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||
…
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<article data-theme="dark" aria-label="Forced dark theme example">
|
||||
<h3>Dark theme</h3>
|
||||
<form class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||
…
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Tooltips"
|
||||
description="Enable tooltips everywhere in pure HTML, without JavaScript."
|
||||
canonical="tooltips.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="tooltips-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="tooltips">
|
||||
<hgroup>
|
||||
<h1>Tooltips</h1>
|
||||
<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Tooltips examples">
|
||||
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
||||
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
|
||||
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
|
||||
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
||||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>
|
||||
|
||||
<article aria-label="Tooltips examples">
|
||||
<div class="grid">
|
||||
<div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
|
||||
<div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
|
||||
<div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
|
||||
<div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
|
||||
</div>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>>Top</<b>button</b>>
|
||||
<<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>>Right</<b>button</b>>
|
||||
<<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>>Bottom</<b>button</b>>
|
||||
<<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>>Left</<b>button</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html') title="Typography" description="All typographic
|
||||
elements are responsive, allowing text to scale gracefully across devices
|
||||
and viewports." canonical="typography.html" }
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="typography-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="typography">
|
||||
<hgroup>
|
||||
<h1>Typography</h1>
|
||||
<h2>
|
||||
All typographic elements are responsive, allowing text to scale
|
||||
gracefully across devices and viewports.
|
||||
</h2>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Extra small</th>
|
||||
<th>Small</th>
|
||||
<th>Medium</th>
|
||||
<th>Large</th>
|
||||
<th>Extra large</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Base font</th>
|
||||
<td>16<small>px</small></td>
|
||||
<td>17<small>px</small></td>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19<small>px</small></td>
|
||||
<td>20<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h1</b>></code></th>
|
||||
<td>32<small>px</small></td>
|
||||
<td>34<small>px</small></td>
|
||||
<td>36<small>px</small></td>
|
||||
<td>38<small>px</small></td>
|
||||
<td>40<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h2</b>></code></th>
|
||||
<td>28<small>px</small></td>
|
||||
<td>29<small>px</small></td>
|
||||
<td>31<small>.5px</small></td>
|
||||
<td>33<small>.25px</small></td>
|
||||
<td>35<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h3</b>></code></th>
|
||||
<td>24<small>px</small></td>
|
||||
<td>25<small>.5px</small></td>
|
||||
<td>27<small>px</small></td>
|
||||
<td>28<small>.5px</small></td>
|
||||
<td>30<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h4</b>></code></th>
|
||||
<td>20<small>px</small></td>
|
||||
<td>21<small>.25px</small></td>
|
||||
<td>22<small>.5px</small></td>
|
||||
<td>23<small>.75px</small></td>
|
||||
<td>25<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h5</b>></code></th>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19<small>.125px</small></td>
|
||||
<td>20<small>.25px</small></td>
|
||||
<td>21<small>.375px</small></td>
|
||||
<td>22<small>.5px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>h6</b>></code></th>
|
||||
<td>16<small>px</small></td>
|
||||
<td>17<small>px</small></td>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19<small>px</small></td>
|
||||
<td>20<small>px</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code><<b>small</b>></code></th>
|
||||
<td>14<small>px</small></td>
|
||||
<td>14<small>.875px</small></td>
|
||||
<td>15<small>.75px</small></td>
|
||||
<td>16<small>.625px</small></td>
|
||||
<td>17<small>.5px</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p>Headings:</p>
|
||||
<article aria-label="Headings examples">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<footer class="code">
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
<p>
|
||||
Inside a <code><<b>hgroup</b>></code> or a
|
||||
<code><<b>div</b> <i>class</i>=<u>"headings"</u>></code> all
|
||||
<code><i>margin-bottom</i></code> are collapsed and the
|
||||
<code>:last-child</code> is muted.
|
||||
</p>
|
||||
<article aria-label="Hgroup example">
|
||||
<div class="headings">
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Subtitle for heading 2</h3>
|
||||
</div>
|
||||
<footer class="code">
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>hgroup</b>></code></pre>
|
||||
|
||||
<pre><code><<b>div</b> <i>class</i>=<u>"headings</u>">
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
</<b>div</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Inline text elements:</p>
|
||||
<article aria-label="Inline text examples">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
|
||||
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
|
||||
<p>
|
||||
<em>Italic</em> <code>i</code> <code>em</code>
|
||||
<code>cite</code>
|
||||
</p>
|
||||
<p><del>Deleted</del> <code>del</code></p>
|
||||
<p><ins>Inserted</ins> <code>ins</code></p>
|
||||
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><mark>Highlighted</mark> <code>mark</code></p>
|
||||
<p><s>Strikethrough</s> <code>s</code></p>
|
||||
<p><small>Small </small> <code>small</code></p>
|
||||
<p>Text <sub>Sub</sub> <code>sub</code></p>
|
||||
<p>Text <sup>Sup</sup> <code>sup</code></p>
|
||||
<p><u>Underline</u> <code>u</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<p>ℹ️ 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"
|
||||
>Secondary</a
|
||||
><br />
|
||||
<a href="#" onclick="event.preventDefault()" class="contrast"
|
||||
>Contrast</a
|
||||
><br />
|
||||
<footer class="code">
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
<p>Blockquote:</p>
|
||||
<article aria-label="Blockquote example">
|
||||
<blockquote>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit
|
||||
non. Nam at dui sit amet ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<footer class="code">
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
<<b>footer</b>>
|
||||
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>blockquote</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue