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

Merge pull request #16 from picocss/dev

Browse source 
Minor Release (v1.3.0)
This commit is contained in:
Lucas Larroche 2021-07-03 13:59:33 +07:00 • committed by GitHub
commit f91683be63
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
67 changed files with 5071 additions and 5010 deletions
Download patch file Download diff file Expand all files Collapse all files

2
LICENSE.md
View file

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

72
README.md
View file

@ -13,44 +13,97 @@
<a href="https://picocss.com/docs/">Documentation</a> <a href="https://picocss.com/docs/">Documentation</a>
</p> </p>
# Pico.css ## Pico.css
[![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest) [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico) [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md) [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
**Class-light and semantic**
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. **Great styles with just one CSS file**
No dependencies, package manager, external files or JavaScript.
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript. **Responsive everything**
Elegant and consistent adaptatives spacings and typography on all devices.
- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices. **Light or Dark mode**
Shipped with two beautiful color themes, automatically enabled according to the user preference.
- **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)
- [Documentation](#documentation)
- [Variations](#variations)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
## Usage ## Usage
There are 3 ways to get started with pico.css: There are 3 ways to get started with pico.css:
### Install manually **Install manually**
[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website. [Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website.
```html ```html
<link rel="stylesheet" href="css/pico.min.css"> <link rel="stylesheet" href="css/pico.min.css">
``` ```
### Install from CDN **Install from CDN**
Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"> <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
``` ```
### Install with NPM **Install with NPM**
```shell ```shell
npm install @picocss/pico npm install @picocss/pico
``` ```
## Class-less version
Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)).
In this version, `header`, `main` and `footer` act as container.
Use the default `.classless `version if you need centered viewports:
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/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://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
<title>Hello, world!</title>
</head>
<body>
<main>
<h1>Hello, world!</h1>
</main>
</body>
</html>
```
## Examples ## Examples
Minimalist templates to discover Pico in action: Minimalist templates to discover Pico in action:
@ -97,11 +150,14 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
- [Typography](https://picocss.com/docs/#typography) - [Typography](https://picocss.com/docs/#typography)
- [Buttons](https://picocss.com/docs/#buttons) - [Buttons](https://picocss.com/docs/#buttons)
- [Forms](https://picocss.com/docs/#forms) - [Forms](https://picocss.com/docs/#forms)
- [Tables](https://picocss.com/docs/#tables)
**Components** **Components**
- [Accordions](https://picocss.com/docs/#accordions) - [Accordions](https://picocss.com/docs/#accordions)
- [Cards](https://picocss.com/docs/#cards) - [Cards](https://picocss.com/docs/#cards)
- [Navs](https://picocss.com/docs/#navs) - [Navs](https://picocss.com/docs/#navs)
- [Progress](https://picocss.com/docs/#progress)
- [Tooltips](https://picocss.com/docs/#tooltips) - [Tooltips](https://picocss.com/docs/#tooltips)
## Variations ## Variations

1609
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

1930
css/pico.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

6
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

1224
css/pico.slim.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

629
css/themes/default.css
View file

@ -2,228 +2,439 @@
* Theme: default * Theme: default
*/ */
:root { :root {
--text-font: 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"; --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";
--titles-font: var(--text-font); --line-height: 1.5;
--code-font: "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"; --font-weight: 400;
--line-height: 1.5; --font-size: 16px;
--text-weight: 400; --border-radius: .25rem;
--titles-weight: 700; --border-width: 1px;
--form-element-weight: var(--text-weight); --outline-width: 3px;
--buttons-weight: var(--text-weight); --spacing: 1rem;
--code-weight: var(--text-weight); --typography-spacing-vertical: 1.5rem;
--base-font-xs: 16px; --block-spacing-vertical: calc(var(--spacing) * 2);
--base-font-sm: 17px; --block-spacing-horizontal: var(--spacing);
--base-font-md: 18px; --grid-spacing-vertical: 0;
--base-font-lg: 19px; --grid-spacing-horizontal: var(--spacing);
--base-font-xl: 20px; --form-element-spacing-vertical: .75rem;
--h1-size: 2rem;
--h2-size: 1.75rem;
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--h6-size: 1rem;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
--switch-border-width: 3px;
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--button-round: var(--block-round); --transition: .2s ease-in-out;
--button-border-width: var(--form-element-border-width);
--button-outline-width: var(--form-element-outline-width);
--button-spacing-vertical: var(--form-element-spacing-vertical);
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
--spacing-gutter: 1rem;
--spacing-block: 2rem;
--spacing-factor-xs: 1;
--spacing-factor-sm: 1.25;
--spacing-factor-md: 1.5;
--spacing-factor-lg: 1.75;
--spacing-factor-xl: 2;
--spacing-typography: 1.5rem;
--spacing-form-element: .25rem;
--transition: .2s ease-in-out;
} }
:root { @media (min-width: 576px) {
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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"); :root {
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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"); --font-size: 17px;
--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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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"); @media (min-width: 768px) {
--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='rgba(40, 138, 106, 0.999)' 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"); :root {
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); --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);
}
}
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
small {
--font-size: 87.5%;
}
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;
}
table thead th,
table thead td {
--border-width: 3px;
}
table :not(thead) td {
--font-size: 0.875rem;
}
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"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--background: #FFF; color-scheme: light;
--text: #415462; --background-color: #FFF;
--h1: #1b2832; --color: #415462;
--h2: #2c3d49; --h1-color: #1b2832;
--h3: #415462; --h2-color: #23333e;
--h4: #596b78; --h3-color: #2c3d49;
--h5: #73828c; --h4-color: #374956;
--h6: #8a99a3; --h5-color: #415462;
--primary: #1095c1; --h6-color: #4d606d;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #08769b; --muted-border-color: #edf0f3;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.125); --primary-hover: #08769b;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.125);
--secondary: #73828c; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #415462; --secondary-hover: #415462;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-focus: rgba(115, 130, 140, 0.125); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #1b2832;
--contrast: #2c3d49; --contrast-hover: #000;
--contrast-border: var(--contrast); --contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-hover: #0d1419; --contrast-inverse: #FFF;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #fff2ca;
--contrast-focus: rgba(115, 130, 140, 0.125); --mark-color: #543a25;
--contrast-inverse: #FFF; --ins-color: #388E3C;
--input-background: #FFF; --del-color: #C62828;
--input-border: #c8d1d8; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-focus: var(--primary-focus); --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-inverse: var(--primary-inverse); --form-element-background-color: transparent;
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-border-color: #a2afb9;
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-color: var(--color);
--valid: #288a6a; --form-element-placeholder-color: var(--muted-color);
--invalid: #b94646; --form-element-active-background-color: transparent;
--mark: rgba(255, 223, 128, 0.33); --form-element-active-border-color: var(--primary);
--mark-text: #2c3d49; --form-element-focus-color: var(--primary-focus);
--muted-text: #7e8d98; --form-element-disabled-background-color: #d5dce2;
--muted-background: #edf0f3; --form-element-disabled-border-color: #a2afb9;
--muted-border: #edf0f3; --form-element-invalid-border-color: #C62828;
--card-background: #FFF; --form-element-invalid-active-border-color: #B71C1C;
--card-sections: #f3f5f7; --form-element-valid-border-color: #388E3C;
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --form-element-valid-active-border-color: #2E7D32;
--code-background: #f3f5f7; --switch-background-color: #bbc6ce;
--code-inlined: #edf0f3; --switch-color: var(--primary-inverse);
--code-color-1: #73828c; --switch-checked-background-color: var(--primary);
--code-color-2: #b34d80; --range-border-color: #d5dce2;
--code-color-3: #3d888f; --range-active-border-color: #bbc6ce;
--code-color-4: #998866; --range-thumb-border-color: var(--background-color);
--code-color-5: #96a4ae; --range-thumb-color: var(--secondary);
--table-border: rgba(237, 240, 243, 0.75); --range-thumb-hover-color: var(--secondary-hover);
--table-stripping: rgba(115, 130, 140, 0.075); --range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #b34d80;
--code-property-color: #3d888f;
--code-value-color: #998866;
--code-comment-color: #a2afb9;
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-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='rgba(65, 84, 98, 0.999)' 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-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='rgba(65, 84, 98, 0.999)' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='rgba(56, 142, 60, 0.999)' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--background: #10181e; color-scheme: dark;
--text: #a2afb9; --background-color: #11191f;
--h1: #edf0f3; --color: #bbc6ce;
--h2: #d5dce2; --h1-color: #edf0f3;
--h3: #bbc6ce; --h2-color: #e1e6ea;
--h4: #a2afb9; --h3-color: #d5dce2;
--h5: #8a99a3; --h4-color: #c8d1d8;
--h6: #73828c; --h5-color: #bbc6ce;
--primary: #1095c1; --h6-color: #aebbc3;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #1ab3e6; --muted-border-color: #1f2d38;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary: #596b78; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #73828c; --secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #edf0f3;
--contrast: #d5dce2; --contrast-hover: #FFF;
--contrast-border: var(--contrast); --contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-hover: #FFF; --contrast-inverse: #000;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #d0c284;
--contrast-focus: rgba(89, 107, 120, 0.25); --mark-color: #11191f;
--contrast-inverse: #10181e; --ins-color: #388E3C;
--input-background: #10181e; --del-color: #C62828;
--input-border: #374956; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-focus: var(--primary-focus); --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-inverse: var(--primary-inverse); --form-element-background-color: #11191f;
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-border-color: #374956;
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-color: var(--color);
--valid: #1f7a5c; --form-element-placeholder-color: var(--muted-color);
--invalid: #943838; --form-element-active-background-color: var(--form-element-background-color);
--mark: rgba(255, 223, 128, 0.1875); --form-element-active-border-color: var(--primary);
--mark-text: #FFF; --form-element-focus-color: var(--primary-focus);
--muted-text: #73828c; --form-element-disabled-background-color: #2c3d49;
--muted-background: #23333e; --form-element-disabled-border-color: #415462;
--muted-border: #23333e; --form-element-invalid-border-color: #B71C1C;
--card-background: #17232b; --form-element-invalid-active-border-color: #C62828;
--card-sections: #141d24; --form-element-valid-border-color: #2E7D32;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --form-element-valid-active-border-color: #388E3C;
--code-background: #141d24; --switch-background-color: #374956;
--code-inlined: rgba(65, 84, 98, 0.25); --switch-color: var(--primary-inverse);
--code-color-1: #73828c; --switch-checked-background-color: var(--primary);
--code-color-2: #a65980; --range-border-color: #23333e;
--code-color-3: #599fa6; --range-active-border-color: #2c3d49;
--code-color-4: #8c8473; --range-thumb-border-color: var(--background-color);
--code-color-5: #4d606d; --range-thumb-color: var(--secondary);
--table-border: rgba(115, 130, 140, 0.075); --range-thumb-hover-color: var(--secondary-hover);
--table-stripping: rgba(115, 130, 140, 0.05); --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: #17232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-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: #141e25;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='rgba(46, 125, 50, 0.999)' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
} }
[data-theme="dark"] { [data-theme="dark"] {
--background: #10181e; color-scheme: dark;
--text: #a2afb9; --background-color: #11191f;
--h1: #edf0f3; --color: #bbc6ce;
--h2: #d5dce2; --h1-color: #edf0f3;
--h3: #bbc6ce; --h2-color: #e1e6ea;
--h4: #a2afb9; --h3-color: #d5dce2;
--h5: #8a99a3; --h4-color: #c8d1d8;
--h6: #73828c; --h5-color: #bbc6ce;
--primary: #1095c1; --h6-color: #aebbc3;
--primary-border: var(--primary); --muted-color: #73828c;
--primary-hover: #1ab3e6; --muted-border-color: #1f2d38;
--primary-hover-border: var(--primary-hover); --primary: #1095c1;
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary: #596b78; --primary-inverse: #FFF;
--secondary-border: var(--secondary); --secondary: #596b78;
--secondary-hover: #73828c; --secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF;
--secondary-inverse: #FFF; --contrast: #edf0f3;
--contrast: #d5dce2; --contrast-hover: #FFF;
--contrast-border: var(--contrast); --contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-hover: #FFF; --contrast-inverse: #000;
--contrast-hover-border: var(--contrast-hover); --mark-background-color: #d0c284;
--contrast-focus: rgba(89, 107, 120, 0.25); --mark-color: #11191f;
--contrast-inverse: #10181e; --ins-color: #388E3C;
--input-background: #10181e; --del-color: #C62828;
--input-border: #374956; --blockquote-border-color: var(--muted-border-color);
--input-hover-background: var(--input-background); --blockquote-footer-color: var(--muted-color);
--input-hover-border: var(--primary); --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-focus: var(--primary-focus); --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--input-inverse: var(--primary-inverse); --form-element-background-color: #11191f;
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-border-color: #374956;
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --form-element-color: var(--color);
--valid: #1f7a5c; --form-element-placeholder-color: var(--muted-color);
--invalid: #943838; --form-element-active-background-color: var(--form-element-background-color);
--mark: rgba(255, 223, 128, 0.1875); --form-element-active-border-color: var(--primary);
--mark-text: #FFF; --form-element-focus-color: var(--primary-focus);
--muted-text: #73828c; --form-element-disabled-background-color: #2c3d49;
--muted-background: #23333e; --form-element-disabled-border-color: #415462;
--muted-border: #23333e; --form-element-invalid-border-color: #B71C1C;
--card-background: #17232b; --form-element-invalid-active-border-color: #C62828;
--card-sections: #141d24; --form-element-valid-border-color: #2E7D32;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --form-element-valid-active-border-color: #388E3C;
--code-background: #141d24; --switch-background-color: #374956;
--code-inlined: rgba(65, 84, 98, 0.25); --switch-color: var(--primary-inverse);
--code-color-1: #73828c; --switch-checked-background-color: var(--primary);
--code-color-2: #a65980; --range-border-color: #23333e;
--code-color-3: #599fa6; --range-active-border-color: #2c3d49;
--code-color-4: #8c8473; --range-thumb-border-color: var(--background-color);
--code-color-5: #4d606d; --range-thumb-color: var(--secondary);
--table-border: rgba(115, 130, 140, 0.075); --range-thumb-hover-color: var(--secondary-hover);
--table-stripping: rgba(115, 130, 140, 0.05); --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: #17232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #a65980;
--code-property-color: #599fa6;
--code-value-color: #8c8473;
--code-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: #141e25;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-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='rgba(162, 175, 185, 0.999)' 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-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='rgba(162, 175, 185, 0.999)' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='rgba(46, 125, 50, 0.999)' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }

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

File diff suppressed because one or more lines are too long

160
docs/css/pico.docs.css
View file

@ -12,20 +12,29 @@
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7); --invalid-color: #C62828;
--nav-border: rgba(115, 130, 140, 0.2); --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;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--nav-background: rgba(16, 24, 30, 0.8); --invalid-color: rgba(183, 28, 28, 0.5);
--nav-border: rgba(115, 130, 140, 0.2); --valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
} }
} }
[data-theme="dark"] { [data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8); --nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2); --nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
} }
/** /**
@ -39,72 +48,61 @@ html {
* Docs: Main (Grid) * Docs: Main (Grid)
*/ */
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem); padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 576px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
}
}
@media (min-width: 768px) {
body > main {
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
body > main { body > main {
grid-column-gap: calc(var(--spacing-gutter) * 4); --block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid; display: grid;
grid-template-columns: 200px auto; grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem); --block-spacing-horizontal: calc(var(--spacing) * 2);
} }
} }
body > main > * { body > main > aside,
body > main div[role="document"] {
min-width: 0; min-width: 0;
} }
div[role="document"] > section::before { div[role="document"] > section::before {
display: block; display: block;
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem); height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem); margin-top: calc(-2rem - 3.5rem + .5rem);
content: ''; content: '';
} }
@media (min-width: 576px) { @media (min-width: 576px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem); height: calc(2.5rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem); height: calc(-2.5rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-md) + 3.5rem); height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem); margin-top: calc(-3rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem); height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem); margin-top: calc(-3.5rem - 3.5rem + .5rem);
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
div[role="document"] > section::before { div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem); height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem); margin-top: calc(-4rem - 3.5rem + .5rem);
} }
} }
@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: ''; content: '';
} }
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
svg { svg {
height: 1rem; height: 1rem;
} }
@ -133,11 +126,11 @@ svg {
*/ */
main > aside nav { main > aside nav {
width: 100%; width: 100%;
margin-bottom: var(--spacing-block); margin-bottom: var(--block-spacing-vertical);
} }
main > aside nav h1 { main > aside nav h1 {
margin-bottom: var(--spacing-typography); margin-bottom: calc(var(--typography-spacing-vertical) / 2);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -184,7 +177,7 @@ main > aside details {
} }
main > aside details summary { main > aside details summary {
color: var(--h3); color: var(--h3-color);
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
@ -195,7 +188,7 @@ main > aside details summary::after {
} }
main > aside details[open] summary { main > aside details[open] summary {
color: var(--h3); color: var(--h3-color);
} }
/** /**
@ -217,8 +210,8 @@ main > aside details[open] summary {
#customization figure { #customization figure {
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
border-top-right-radius: var(--block-round); border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--block-round); border-top-left-radius: var(--border-radius);
} }
} }
@ -260,10 +253,14 @@ main > aside details[open] summary {
border-color: var(--primary); border-color: var(--primary);
} }
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button { #grids button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: var(--spacing);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -283,13 +280,15 @@ main > aside details[open] summary {
} }
#grids .grid > * { #grids .grid > * {
padding: calc(var(--spacing-gutter) / 2) 0; padding: calc(var(--spacing) / 2) 0;
background: var(--code-background); border-radius: var(--border-radius);
background: var(--code-background-color);
font-size: 87.5%;
text-align: center; text-align: center;
} }
#grids details { #grids details {
margin-top: calc(var(--spacing-typography) * 2); margin-top: calc(var(--typography-spacing-vertical) * 2);
} }
#grids details svg { #grids details svg {
@ -304,12 +303,12 @@ main > aside details[open] summary {
* Docs: Typography * Docs: Typography
*/ */
section > hgroup { section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2); margin-bottom: calc(var(--typography-spacing-vertical) * 2);
} }
a[role=button] { a[role=button] {
margin-right: calc(var(--spacing-typography) / 4); margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
} }
[role=document] section > h1, [role=document] section > h1,
@ -321,28 +320,11 @@ a[role=button] {
/** /**
* Docs: Code * Docs: Code
*/ */
@media (min-width: 576px) { section > pre {
pre { margin: var(--block-spacing-vertical) 0;
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
} background-color: var(--card-sectionning-background-color);
} box-shadow: var(--card-box-shadow);
@media (min-width: 768px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@media (min-width: 992px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@media (min-width: 1200px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
} }
[data-theme="invalid"], [data-theme="invalid"],
@ -367,8 +349,8 @@ a[role=button] {
@media (min-width: 992px) { @media (min-width: 992px) {
[data-theme="invalid"]:before, [data-theme="invalid"]:before,
[data-theme="valid"]:before { [data-theme="valid"]:before {
top: var(--spacing-gutter); top: var(--spacing);
right: var(--spacing-gutter); right: var(--spacing);
} }
} }
@ -378,12 +360,12 @@ a[role=button] {
} }
[data-theme="invalid"]:before { [data-theme="invalid"]:before {
background: var(--invalid); background: var(--invalid-color);
content: 'Not so great'; content: 'Not so great';
} }
[data-theme="valid"]:before { [data-theme="valid"]:before {
background: var(--valid); background: var(--valid-color);
content: 'Great'; content: 'Great';
} }
@ -398,8 +380,8 @@ body > nav {
right: 0; right: 0;
left: 0; left: 0;
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background); background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border); box-shadow: 0px 1px 0 var(--nav-border-color);
} }
body > nav a { body > nav a {
@ -413,10 +395,10 @@ body > nav svg {
body > nav ul:first-of-type li:first-of-type a { body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1); margin-left: calc(var(--spacing) * -1);
padding: 0; padding: 0;
background: var(--h1); background: var(--h1-color);
color: var(--background); color: var(--nav-logo-color);
} }
body > nav ul:first-of-type li:first-of-type a svg { body > nav ul:first-of-type li:first-of-type a svg {
@ -425,8 +407,8 @@ body > nav ul:first-of-type li:first-of-type a svg {
body > nav ul:first-of-type li:nth-of-type(2) { body > nav ul:first-of-type li:nth-of-type(2) {
display: none; display: none;
margin-left: var(--spacing-gutter); margin-left: var(--spacing);
color: var(--h1); color: var(--h1-color);
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -440,13 +422,13 @@ body > nav ul:first-of-type li:nth-of-type(2) {
*/ */
.switcher { .switcher {
position: fixed; position: fixed;
right: calc(var(--spacing-gutter) / 2); right: calc(var(--spacing) / 2);
bottom: var(--spacing-gutter); bottom: var(--spacing);
width: auto; width: auto;
margin-bottom: 0; margin-bottom: 0;
padding: .75rem; padding: .75rem;
border-radius: 2rem; border-radius: 2rem;
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
line-height: 1; line-height: 1;
text-align: right; text-align: right;
} }
@ -484,16 +466,16 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover i { .switcher:hover i {
max-width: 100%; max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition); transition: max-width var(--transition), padding var(--transition);
} }
.switcher:focus { .switcher:focus {
box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.switcher { .switcher {
right: var(--spacing-gutter); right: var(--spacing);
} }
} }

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

File diff suppressed because one or more lines are too long

35
docs/css/themes/docs.css Normal file
View file

@ -0,0 +1,35 @@
/**
* Theme: Additions for docs
*/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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;
}
@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: #0d1419;
}
}
[data-theme="dark"] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
}

1
docs/css/themes/docs.min.css vendored Normal file
View file

@ -0,0 +1 @@
:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-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")}:root:not([data-theme=dark]),[data-theme=light]{--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}@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:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}

230
docs/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title> <title>Pico.css • Graceful & Minimal CSS design system</title>
<link rel="shortcut icon" href="img/favicon.ico"> <link rel="shortcut icon" href="img/favicon.ico">
@ -116,7 +116,7 @@
&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt; &lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
&lt;<b>head</b>&gt; &lt;<b>head</b>&gt;
&lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt; &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
&lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"</u>&gt; &lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1"</u>&gt;
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt; &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
&lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt; &lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
&lt;/<b>head</b>&gt; &lt;/<b>head</b>&gt;
@ -191,9 +191,60 @@
</label> </label>
</fieldset> </fieldset>
</form> </form>
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c500">...</u>;
}
</code></pre>
</article> </article>
<p>There are 2 ways to customize your version of Pico.css:</p> <p>There are 2 ways to customize your version of Pico.css:</p>
<h4>Importing SASS</h4> <h4>Overriding CSS variables</h4>
<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=<u>"light"</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>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>
<h4>Importing Pico SASS library</h4>
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p> <p>It is recommended to customize Pico by importing SASS source files in 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> <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
@ -221,66 +272,31 @@
</code></pre> </code></pre>
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p> <p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
<h4>Overriding CSS variables</h4>
<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=<u>"light"</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>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>--primary-border</i>: <u>var</u>(<i>--primary</i>);
<i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
<i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
<i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</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/default.css</a></p>
</section><!-- ./ Docs: Customization --> </section><!-- ./ Docs: Customization -->
<!-- Docs: Classless --> <!-- Docs: Classless -->
<section id="classless"> <section id="classless">
<hgroup> <hgroup>
<h2>Class-less version</h2> <h2>Class-less version</h2>
<h3>For wild HTML purists!</h3> <h3>For wild HTML purists!</h3>
</hgroup> </hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p> <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p> <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p> <p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p> <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p> <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
<p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>
<pre><code><em>// Centered viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>&gt;
</code></pre>
<pre><code><em>// Fluid viewport</em>
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt;
</code></pre>
</section><!-- ./ Docs: Classless --> </section><!-- ./ Docs: Classless -->
<!-- Docs: Container --> <!-- Docs: Container -->
@ -297,7 +313,7 @@
&lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt; &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt;</code></pre> &lt;/<b>body</b>&gt;</code></pre>
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p> <p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
<figure> <figure>
<table role="grid"> <table role="grid">
<thead> <thead>
@ -321,7 +337,7 @@
</tr> </tr>
<tr> <tr>
<th>Viewport</th> <th>Viewport</th>
<td>None&nbsp;<small>(auto)</small></td> <td>100<small>%</small></td>
<td>540<small>px</small></td> <td>540<small>px</small></td>
<td>720<small>px</small></td> <td>720<small>px</small></td>
<td>960<small>px</small></td> <td>960<small>px</small></td>
@ -452,7 +468,7 @@
<section id="typography"> <section id="typography">
<hgroup> <hgroup>
<h2>Typography</h2> <h2>Typography</h2>
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3> <h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.</h3>
</hgroup> </hgroup>
<figure> <figure>
<table role="grid"> <table role="grid">
@ -476,7 +492,7 @@
<td>20<small>px</small></td> <td>20<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h1</th> <th><code>&lt;<b>h1</b>&gt;</code></th>
<td>32<small>px</small></td> <td>32<small>px</small></td>
<td>34<small>px</small></td> <td>34<small>px</small></td>
<td>36<small>px</small></td> <td>36<small>px</small></td>
@ -484,45 +500,53 @@
<td>40<small>px</small></td> <td>40<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h2</th> <th><code>&lt;<b>h2</b>&gt;</code></th>
<td>28<small>px</small></td> <td>28<small>px</small></td>
<td>29<small>px</small></td> <td>29<small>px</small></td>
<td>31.5<small>px</small></td> <td>31<small><small>.5px</small></td>
<td>33.25<small>px</small></td> <td>33<small>.25px</small></td>
<td>35<small>px</small></td> <td>35<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h3</th> <th><code>&lt;<b>h3</b>&gt;</code></th>
<td>24<small>px</small></td> <td>24<small>px</small></td>
<td>25.5<small>px</small></td> <td>25<small>.5px</small></td>
<td>27<small>px</small></td> <td>27<small>px</small></td>
<td>28.5<small>px</small></td> <td>28<small>.5px</small></td>
<td>30<small>px</small></td> <td>30<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h4</th> <th><code>&lt;<b>h4</b>&gt;</code></th>
<td>20<small>px</small></td> <td>20<small>px</small></td>
<td>21.25<small>px</small></td> <td>21<small>.25px</small></td>
<td>22.5<small>px</small></td> <td>22<small>.5px</small></td>
<td>23.75<small>px</small></td> <td>23<small>.75px</small></td>
<td>25<small>px</small></td> <td>25<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h5</th> <th><code>&lt;<b>h5</b>&gt;</code></th>
<td>18<small>px</small></td> <td>18<small>px</small></td>
<td>19.125<small>px</small></td> <td>19<small>.125px</small></td>
<td>20.25<small>px</small></td> <td>20<small>.25px</small></td>
<td>21.375<small>px</small></td> <td>21<small>.375px</small></td>
<td>22.5<small>px</small></td> <td>22<small>.5px</small></td>
</tr> </tr>
<tr> <tr>
<th>h6</th> <th><code>&lt;<b>h6</b>&gt;</code></th>
<td>16<small>px</small></td> <td>16<small>px</small></td>
<td>17<small>px</small></td> <td>17<small>px</small></td>
<td>18<small>px</small></td> <td>18<small>px</small></td>
<td>19<small>px</small></td> <td>19<small>px</small></td>
<td>20<small>px</small></td> <td>20<small>px</small></td>
</tr> </tr>
<tr>
<th><code>&lt;<b>small</b>&gt;</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>27<small>.5px</small></td>
</tr>
</tbody> </tbody>
</table> </table>
</figure> </figure>
@ -543,7 +567,7 @@
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre> &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</article> </article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p> <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<article aria-label="Hgroup example"> <article aria-label="Hgroup example">
<hgroup> <hgroup>
<h2>Heading 2</h2> <h2>Heading 2</h2>
@ -656,7 +680,7 @@
<section id="forms"> <section id="forms">
<hgroup> <hgroup>
<h2>Forms</h2> <h2>Forms</h2>
<h3>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</h3> <h3>All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.</h3>
</hgroup> </hgroup>
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p> <p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
<p>All natives form elements are fully customized and themables with CSS variables.</p> <p>All natives form elements are fully customized and themables with CSS variables.</p>
@ -725,24 +749,28 @@
<p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p> <p><code>&lt;<b>fieldset</b>&gt;</code> are unstyled and act 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> <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"> <article aria-label="Select, radios, checkboxes, switch examples">
<label for="country">Country</label> <label for="fruit">Fruit</label>
<select id="country"> <select id="fruit" required>
<option selected>Choose...</option> <option value="" selected>Select a fruit...</option>
<option>...</option> <option>Banana</option>
<option>Watermelon</option>
<option>Apple</option>
<option>Orange</option>
<option>Mangoe</option>
</select> </select>
<fieldset> <fieldset>
<legend>Gender</legend> <legend>Size</legend>
<label for="male"> <label for="small">
<input type="radio" id="male" name="gender" value="male" checked> <input type="radio" id="small" name="size" value="small" checked>
Male Small
</label> </label>
<label for="female"> <label for="medium">
<input type="radio" id="female" name="gender" value="female"> <input type="radio" id="medium" name="size" value="medium">
Female Medium
</label> </label>
<label for="other"> <label for="large">
<input type="radio" id="other" name="gender" value="other"> <input type="radio" id="large" name="size" value="large">
Other Large
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -759,26 +787,26 @@
</fieldset> </fieldset>
<pre><code><em>&lt;!-- Select --&gt;</em> <pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"country"</u>&gt;Country&lt;/<b>label</b>&gt; &lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"country</u>"&gt; &lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt; &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit...&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt; &lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt; &lt;/<b>select</b>&gt;
<em>&lt;!-- Radios --&gt;</em> <em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt; &lt;<b>legend</b>&gt;Size&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"male"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"male"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"male"</u> <i>checked</i>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>&gt;
Male Small
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"female"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"female"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"female"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Female Medium
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"other"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"other"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"other"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Other Large
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
@ -1015,7 +1043,7 @@
<section id="cards"> <section id="cards">
<hgroup> <hgroup>
<h2>Cards</h2> <h2>Cards</h2>
<h3>A flexible container with graceful spacings across devices and viewport sizes.</h3> <h3>A flexible container with graceful spacings across devices and viewports.</h3>
</hgroup> </hgroup>
<article aria-label="Card example"> <article aria-label="Card example">
I'm a card! I'm a card!
@ -1023,11 +1051,13 @@
<pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre> <pre><code>&lt;<b>article</b>&gt;I'm a card!&lt;/<b>article</b>&gt;</code></pre>
<p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p> <p>You can use <code>&lt;<b>header</b>&gt;</code> and footer <code>&lt;<b>footer</b>&gt;</code> inside <code>&lt;<b>article</b>&gt;</code></p>
<article aria-label="Card sectioning example"> <article aria-label="Card sectioning example">
<header>Header</header>
Body Body
<footer>Footer</footer> <footer>Footer</footer>
</article> </article>
<pre><code>&lt;<b>article</b>&gt; <pre><code>&lt;<b>article</b>&gt;
&lt;<b>header</b>&gt;Header&lt;/<b>header</b>&gt;
Body Body
&lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt; &lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
&lt;/<b>article</b>&gt;</code></pre> &lt;/<b>article</b>&gt;</code></pre>

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

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

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

File diff suppressed because one or more lines are too long

2
docs/js/src/aside.js
View file

@ -2,7 +2,7 @@
* Aside adjustment * Aside adjustment
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

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

@ -2,7 +2,7 @@
* Color Picker * Color Picker
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {
@ -291,19 +291,6 @@
"a700": "#dd2c00", "a700": "#dd2c00",
"inverse": "#FFF" "inverse": "#FFF"
}, },
/*"brown": {
"50": "#efebe9",
"100": "#d7ccc8",
"200": "#bcaaa4",
"300": "#a1887f",
"400": "#8d6e63",
"500": "#795548",
"600": "#6d4c41",
"700": "#5d4037",
"800": "#4e342e",
"900": "#3e2723",
"inverse": "#FFF"
},*/
"grey": { "grey": {
"50": "#fafafa", "50": "#fafafa",
"100": "#f5f5f5", "100": "#f5f5f5",
@ -458,7 +445,7 @@
// Update CSS Style // Update CSS Style
var generatedStyles = '[data-theme="generated"] {' var generatedStyles = '[data-theme="generated"] {'
+ '--h4:' + data[700] + ';' + '--h4-color:' + data[700] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';' + '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';' + '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
@ -467,7 +454,7 @@
+ '@media only screen and (prefers-color-scheme: dark) {' + '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {' + ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--h4:' + data[400] + ';' + '--h4-color:' + data[400] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';' + '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -476,7 +463,7 @@
+ '}' + '}'
+ '[data-theme="dark"] [data-theme="generated"] {' + '[data-theme="dark"] [data-theme="generated"] {'
+ '--h4:' + data[500] + ';' + '--h4-color:' + data[500] + ';'
+ '--primary:' + data[600] + ';' + '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';' + '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -484,11 +471,10 @@
+ '}' + '}'
+ '[data-theme="generated"] {' + '[data-theme="generated"] {'
+ '--primary-border: var(--primary);' + '--form-element-active-border-color: var(--primary);'
+ '--primary-hover-border: var(--primary-hover);' + '--form-element-focus-color: var(--primary-focus);'
+ '--input-hover-border: var(--primary);' + '--switch-color: var(--primary-inverse);'
+ '--input-focus: var(--primary-focus);' + '--switch-checked-background-color: var(--primary);'
+ '--input-inverse: var(--primary-inverse);'
+ '}'; + '}';
// Insert CSS Styles // Insert CSS Styles

2
docs/js/src/grid.js
View file

@ -2,7 +2,7 @@
* Grid Interaction * Grid Interaction
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

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

@ -5,7 +5,7 @@
* Require `most-visible.js` from https://github.com/andyexeter/most-visible * Require `most-visible.js` from https://github.com/andyexeter/most-visible
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

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

@ -2,7 +2,7 @@
* Theme Switcher * Theme Switcher
* *
* Pico.css - https://picocss.com * Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
(function() { (function() {

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

@ -10,8 +10,8 @@ body > nav {
right: 0; right: 0;
left: 0; left: 0;
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background); background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border); box-shadow: 0px 1px 0 var(--nav-border-color);
a { a {
border-radius: 0; border-radius: 0;
@ -29,10 +29,10 @@ body > nav {
a { a {
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1); margin-left: calc(var(--spacing) * -1);
padding: 0; padding: 0;
background: var(--h1); background: var(--h1-color);
color: var(--background); color: var(--nav-logo-color);
svg { svg {
height: 3.5rem; height: 3.5rem;
@ -43,8 +43,8 @@ body > nav {
// Title // Title
&:nth-of-type(2) { &:nth-of-type(2) {
display: none; display: none;
margin-left: var(--spacing-gutter); margin-left: var(--spacing);
color: var(--h1); color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
display: inline; display: inline;

13
docs/scss/components/_theme-switcher.scss
View file

@ -4,13 +4,13 @@
.switcher { .switcher {
position: fixed; position: fixed;
right: calc(var(--spacing-gutter) / 2); right: calc(var(--spacing) / 2);
bottom: var(--spacing-gutter); bottom: var(--spacing);
width: auto; width: auto;
margin-bottom: 0; margin-bottom: 0;
padding: .75rem; padding: .75rem;
border-radius: 2rem; border-radius: 2rem;
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
line-height: 1; line-height: 1;
text-align: right; text-align: right;
@ -53,18 +53,17 @@
i { i {
max-width: 100%; max-width: 100%;
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), transition: max-width var(--transition),
padding var(--transition); padding var(--transition);
} }
} }
&:focus { &:focus {
box-shadow: var(--card-shadow), box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
0 0 0 0.2rem var(--secondary-focus);
} }
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
right: var(--spacing-gutter); right: var(--spacing);
} }
} }

48
docs/scss/content/_code.scss
View file

@ -2,40 +2,12 @@
* Docs: Code * Docs: Code
*/ */
// Custom spacings for <pre> (vertically aligned with <article> content) // Custom spacings for <pre> (Horizontally aligned with <article> content)
pre { section > pre {
margin: var(--block-spacing-vertical) 0;
@if map-get($breakpoints, "sm") and padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
$enable-responsive-spacings { background-color: var(--card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
@media (min-width: map-get($breakpoints, "sm")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
} }
// Badge for Valid & Invalid code // Badge for Valid & Invalid code
@ -57,8 +29,8 @@ pre {
line-height: 1; line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter); top: var(--spacing);
right: var(--spacing-gutter); right: var(--spacing);
} }
} }
@ -71,14 +43,14 @@ pre {
// Color for Valid & Invalid code // Color for Valid & Invalid code
[data-theme="invalid"] { [data-theme="invalid"] {
&:before { &:before {
background: var(--invalid); background: var(--invalid-color);
content: 'Not so great'; content: 'Not so great';
} }
} }
[data-theme="valid"] { [data-theme="valid"] {
&:before { &:before {
background: var(--valid); background: var(--valid-color);
content: 'Great'; content: 'Great';
} }
} }

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

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

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

@ -6,10 +6,10 @@ main > aside {
nav { nav {
width: 100%; width: 100%;
margin-bottom: var(--spacing-block); margin-bottom: var(--block-spacing-vertical);
h1 { h1 {
margin-bottom: var(--spacing-typography); margin-bottom: calc(var(--typography-spacing-vertical) / 2);
} }
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
@ -55,7 +55,7 @@ main > aside {
border-bottom: none; border-bottom: none;
summary { summary {
color: var(--h3); color: var(--h3-color);
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
@ -66,7 +66,7 @@ main > aside {
} }
&[open] summary { &[open] summary {
color: var(--h3); color: var(--h3-color);
} }
} }
} }

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

@ -3,8 +3,6 @@
*/ */
// Docs: Themes // Docs: Themes
// ––––––––––––––––––––
#themes { #themes {
button i { button i {
font-style: normal; font-style: normal;
@ -12,8 +10,6 @@
} }
// Docs: Customization // Docs: Customization
// ––––––––––––––––––––
#customization { #customization {
figure { figure {
@ -26,8 +22,8 @@
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
grid-template-columns: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr; grid-template-rows: 1fr;
border-top-right-radius: var(--block-round); border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--block-round); border-top-left-radius: var(--border-radius);
} }
~ article { ~ article {
@ -75,14 +71,14 @@
// Docs: Grids // Docs: Grids
// ––––––––––––––––––––
#grids { #grids {
--grid-spacing-vertical: 1rem;
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: var(--spacing);
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
display: inline-block; display: inline-block;
@ -99,14 +95,18 @@
} }
} }
.grid > * { .grid {
padding: calc(var(--spacing-gutter) / 2) 0; > * {
background: var(--code-background); padding: calc(var(--spacing) / 2) 0;
text-align: center; border-radius: var(--border-radius);
background: var(--code-background-color);
font-size: 87.5%;
text-align: center;
}
} }
details { details {
margin-top: calc(var(--spacing-typography) * 2); margin-top: calc(var(--typography-spacing-vertical) * 2);
svg { svg {
vertical-align: bottom; vertical-align: bottom;
@ -115,8 +115,6 @@
} }
// Docs: Forms // Docs: Forms
// ––––––––––––––––––––
#forms div.grid { #forms div.grid {
grid-row-gap: 0; grid-row-gap: 0;
} }

93
docs/scss/layout/_main.scss
View file

@ -2,71 +2,73 @@
* Docs: Main (Grid) * Docs: Main (Grid)
*/ */
// Config
$navHeight: 3.5rem; $navHeight: 3.5rem;
// Main grid
body > main { body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
@media (min-width: map-get($breakpoints, "sm")) { padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$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) * 4);
display: grid;
grid-template-columns: 200px auto;
}
} }
@media (min-width: map-get($breakpoints, "md")) { @if map-get($breakpoints, "xl") {
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); @media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
} }
@media (min-width: map-get($breakpoints, "lg")) { > aside,
grid-column-gap: calc(var(--spacing-gutter) * 4); div[role="document"] {
display: grid; min-width: 0;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
}
@media (min-width: map-get($breakpoints, "xl")) {
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
}
> * {
min-width: 0; // HACK for childs in overflow
} }
} }
// Anchors hacks for internal links // Anchors hacks for internal links
// ––––––––––––––––––––
div[role="document"] > section::before { div[role="document"] > section::before {
display: block; display: block;
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight}); height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight}); margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: ''; content: '';
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight}); height: calc(2.5rem + #{$navHeight} - .5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight}); height: calc(-2.5rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "md")) { @if map-get($breakpoints, "md") {
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); @media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight}); height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "lg")) { @if map-get($breakpoints, "lg") {
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight}); @media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight}); height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
}
} }
@media (min-width: map-get($breakpoints, "xl")) { @if map-get($breakpoints, "xl") {
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight}); @media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight}); height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
}
} }
} }
// External links // External links
// ––––––––––––––––––––
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after { div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: ''; content: '';
} }
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}
// Embedded SVG // Embedded SVG
// ––––––––––––––––––––
svg { svg {
height: 1rem; height: 1rem;
} }

12
docs/scss/themes/docs/_dark.scss
View file

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)}; --invalid-color: #{rgba($red-900, .5)};
--nav-border: #{rgba($grey-500, .2)}; --valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
} }
} }
@ -12,6 +15,9 @@
// Dark theme (Forced) [Additions for docs] // Dark theme (Forced) [Additions for docs]
// Enabled if forced with data-theme="dark" // Enabled if forced with data-theme="dark"
[data-theme="dark"] { [data-theme="dark"] {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background: #{rgba(darken($grey-900, 6%), .8)}; --nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)}; --nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{mix($black, $grey-900)};
} }

1
docs/scss/themes/docs/_icons.scss
View file

@ -1,6 +1,5 @@
// Icons // Icons
// Source: https://feathericons.com/ // Source: https://feathericons.com/
:root { :root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

7
docs/scss/themes/docs/_light.scss
View file

@ -2,6 +2,9 @@
// Can be forced with data-theme="light" // Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)}; --invalid-color: #{$red-800};
--nav-border: #{rgba($grey-500, .2)}; --valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-logo-color: #{$white};
} }

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.2.1", "version": "1.3.0",
"description": "Graceful & Minimal CSS design system in pure semantic HTML", "description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "css/pico.min.css",

11
scss/_variables.scss
View file

@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
// Enable .container and .container-fluid // Enable .container and .container-fluid
$enable-class-container: true !default; $enable-class-container: true !default;
// Enable a centered viewport // Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Fluid layout if disabled // Fluid layout if disabled
$enable-viewport: true !default; $enable-viewport: true !default;
@ -16,20 +16,17 @@ $enable-viewport: true !default;
$enable-responsive-spacings: true !default; $enable-responsive-spacings: true !default;
// Enable responsive typography // Enable responsive typography
// Fixed base font if disabled // Fixed root element size if disabled
$enable-responsive-typography: true !default; $enable-responsive-typography: true !default;
// Enable .classes // Enable .classes
// .classless version if disabled // .classless version if disabled
$enable-classes: true !default; $enable-classes: true !default;
// Enable validation states for <input> // Enable transitions
$enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default; $enable-transitions: true !default;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"]) // Enable overriding with !important
$enable-important: true !default; $enable-important: true !default;

26
scss/components/_accordion.scss
View file

@ -5,22 +5,30 @@
details { details {
display: block; display: block;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing-typography) / 2); padding-bottom: calc(var(--spacing) / 2);
border-bottom: 1px solid var(--muted-border); border-bottom: var(--border-width) solid var(--accordion-border-color);
summary { summary {
color: var(--accordion-close-summary-color);
line-height: 1rem; line-height: 1rem;
list-style-type: none; list-style-type: none;
list-style-type: none;
cursor: pointer; cursor: pointer;
@if $enable-transitions {
transition: color var(--transition);
}
// Reset marker // Reset marker
&::-webkit-details-marker { &::-webkit-details-marker {
display: none; display: none;
} }
&::marker { &::marker {
display: none; display: none;
} }
&::-moz-list-bullet { &::-moz-list-bullet {
list-style-type: none; list-style-type: none;
} }
@ -45,10 +53,11 @@ details {
&:focus { &:focus {
outline: none; outline: none;
color: var(--accordion-active-summary-color);
} }
~ * { ~ * {
margin-top: calc(var(--spacing-typography) / 2); margin-top: calc(var(--spacing) / 2);
~ * { ~ * {
margin-top: 0; margin-top: 0;
@ -59,9 +68,12 @@ details {
// Open // Open
&[open] { &[open] {
summary { > summary {
margin-bottom: calc(var(--spacing-typography) / 4); margin-bottom: calc(var(--spacing) / 4);
color: var(--muted-text);
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
&::after { &::after {
transform: rotate(0); transform: rotate(0);

133
scss/components/_card-sectioning.scss
View file

@ -1,133 +0,0 @@
/**
* Card sectionning (<article> > header, footer, pre)
*/
article {
> header,
> footer {
background-color: var(--card-sections);
}
> header,
> footer,
> pre {
margin: calc(var(--spacing-gutter) * -1);
padding: var(--spacing-block) var(--spacing-gutter);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> header {
margin-top: calc(var(--spacing-gutter) * -2);
margin-bottom: var(--spacing-block);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
}
> footer,
> pre {
margin-top: var(--spacing-block);
margin-bottom: calc(var(--spacing-gutter) * -2);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
}
}
}
}

67
scss/components/_card.scss
View file

@ -3,57 +3,32 @@
*/ */
article { article {
margin: var(--spacing-block) 0; margin: var(--block-spacing-vertical) 0;
padding: var(--spacing-block) var(--spacing-gutter); padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
overflow: hidden; overflow: hidden;
border-radius: var(--block-round); border-radius: var(--border-radius);
background: var(--card-background); background: var(--card-background-color);
box-shadow: var(--card-shadow); box-shadow: var(--card-box-shadow);
@if map-get($breakpoints, "sm") { > header,
@media (min-width: map-get($breakpoints, "sm")) { > footer,
@if $enable-responsive-spacings { > pre {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; margin-right: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); margin-left: calc(var(--block-spacing-horizontal) * -1);
} padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
@else { background-color: var(--card-sectionning-background-color);
margin: var(--spacing-block) 0;
padding: var(--spacing-block);
}
}
} }
@if map-get($breakpoints, "md") and > header {
$enable-responsive-spacings { margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "md")) { border-bottom: var(--border-width) solid var(--card-border-color);
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
}
} }
@if map-get($breakpoints, "lg") and > footer,
$enable-responsive-spacings { > pre {
margin-top: var(--block-spacing-vertical);
@media (min-width: map-get($breakpoints, "lg")) { margin-bottom: calc(var(--block-spacing-vertical) * -1);
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; border-top: var(--border-width) solid var(--card-border-color);
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
}
}
// Remove last-child margin bottom
@if $enable-important {
> *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0 !important;
}
} }
} }

35
scss/components/_nav.scss
View file

@ -2,7 +2,7 @@
* Nav * Nav
*/ */
// Inline // Horizontal Nav
nav, nav,
nav ul { nav ul {
display: flex; display: flex;
@ -19,17 +19,17 @@ nav {
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(--spacing-gutter) * -0.5); margin-left: calc(var(--spacing) * -0.5);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(--spacing-gutter) * -0.5); margin-right: calc(var(--spacing) * -0.5);
} }
} }
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); padding: var(--spacing) calc(var(--spacing) / 2);
// HACK: Input & Button inside Nav // HACK: Input & Button inside Nav
> *, > *,
@ -40,26 +40,15 @@ nav {
a { a {
display: block; display: block;
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); padding: var(--spacing) calc(var(--spacing) / 2);
border-radius: var(--block-round); border-radius: var(--border-radius);
text-decoration: none;
@if $enable-important {
text-decoration: none !important;
}
@else {
text-decoration: none;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@if $enable-important { text-decoration: none;
text-decoration: none !important;
}
@else {
text-decoration: none;
}
} }
} }
} }
@ -75,11 +64,11 @@ aside {
} }
li { li {
padding: calc(var(--spacing-gutter) / 2); padding: calc(var(--spacing) / 2);
a { a {
margin: calc(var(--spacing-gutter) * -0.5); margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing-gutter) / 2); padding: calc(var(--spacing) / 2);
} }
} }
} }

21
scss/components/_progress.scss
View file

@ -18,6 +18,7 @@ progress {
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
progress { progress {
// Reset the default appearance // Reset the default appearance
@ -29,31 +30,31 @@ progress {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: .5rem; height: .5rem;
margin-bottom: calc(var(--spacing-typography) / 2); margin-bottom: calc(var(--spacing) / 2);
overflow: hidden; overflow: hidden;
// Remove Firefox and Opera border // Remove Firefox and Opera border
border: 0; border: 0;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--muted-background); background-color: var(--progress-background-color);
// IE10 uses `color` to set the bar background-color // IE10 uses `color` to set the bar background-color
color: var(--primary); color: var(--progress-color);
&::-webkit-progress-bar { &::-webkit-progress-bar {
border-radius: var(--block-round); border-radius: var(--border-radius);
background: transparent; background: transparent;
} }
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: var(--primary); background-color: var(--progress-color);
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: var(--primary); background-color: var(--progress-color);
} }
&:indeterminate { &:indeterminate {
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progressIndeterminate 1s linear infinite;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -64,7 +65,7 @@ progress {
} }
} }
@keyframes progress-indeterminate { @keyframes progressIndeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }

21
scss/components/_tooltip.scss
View file

@ -21,12 +21,12 @@
padding: .25rem .5rem; padding: .25rem .5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
border-radius: var(--block-round); border-radius: var(--border-radius);
background: var(--contrast); background: var(--tooltip-background-color);
color: var(--contrast-inverse); color: var(--tooltip-color);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: var(--text-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -44,9 +44,8 @@
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--contrast); color: var(--tooltip-background-color);
content: ''; content: '';
} }
&:focus, &:focus,
@ -56,8 +55,8 @@
opacity: 1; opacity: 1;
@if $enable-transitions { @if $enable-transitions {
animation-duration: .2s;
animation-name: slide; animation-name: slide;
animation-duration: .2s;
} }
} }
@ -73,12 +72,12 @@
@if $enable-transitions { @if $enable-transitions {
@keyframes slide { @keyframes slide {
from { from {
opacity: 0;
transform: translate(-50%, .75rem); transform: translate(-50%, .75rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
opacity: 1;
} }
} }
@ -87,12 +86,12 @@
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
opacity: 0;
} }
to { to {
opacity: 1;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
opacity: 1;
} }
} }
} }

2
scss/content/_accessibility.scss
View file

@ -3,7 +3,7 @@
*/ */
// Reboot based on : // Based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––

133
scss/content/_button-styles.scss
View file

@ -1,133 +0,0 @@
@if $enable-classes {
/**
* Button Styles
*/
// Button .secondary
button.secondary,
input[type="submit"].secondary,
input[type="reset"],
a[role="button"].secondary {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
&:focus {
@if $enable-important {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
@else {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
}
}
}
// Button .contrast
button.contrast,
input[type="submit"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
border: var(--button-border-width) solid var(--contrast-border);
background-color: var(--contrast);
color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--contrast-hover-border);
background-color: var(--contrast-hover);
}
&:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
}
}
// Button .outline
button.outline,
input[type="submit"].outline,
a[role="button"].outline {
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
}
// Button .outline.secondary
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="reset"].outline,
a[role="button"].outline.secondary {
border: var(--button-border-width) solid var(--secondary-border);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: var(--button-border-width)solid var(--secondary-hover-border);
color: var(--secondary-hover);
}
}
// Button .outline.contrast
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
border: var(--button-border-width) solid var(--contrast-border);
background-color: transparent;
color: var(--contrast);
&:hover,
&:active,
&:focus {
border: var(--button-border-width) solid var(--contrast-hover-border);
color: var(--contrast-hover);
}
}
}
@else {
// Button reset only for classless version
input[type="reset"] {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
&:focus {
@if $enable-important {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
@else {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
}
}
}
}

134
scss/content/_button.scss
View file

@ -31,8 +31,8 @@ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
@ -42,7 +42,7 @@ button::-moz-focus-inner,
button { button {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
} }
a[role="button"] { a[role="button"] {
@ -54,17 +54,20 @@ button,
input[type="submit"], input[type="submit"],
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] { a[role="button"] {
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); --background-color: var(--primary);
border: var(--button-border-width) solid var(--primary-border); --border-color: var(--primary);
border-radius: var(--button-round); --color: var(--primary-inverse);
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none; outline: none;
background-color: var(--primary); background-color: var(--background-color);
box-shadow: var(--button-shadow); box-shadow: var(--box-shadow);
color: var(--primary-inverse); color: var(--color);
font-size: 1rem; font-size: 1rem;
font-weight: var(--buttons-weight); font-weight: var(--font-weight);
line-height: var(--line-height); line-height: var(--line-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -80,19 +83,118 @@ a[role="button"] {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
border-color: var(--primary-hover-border); --background-color: var(--primary-hover);
background-color: var(--primary-hover); --border-color: var(--primary-hover);
box-shadow: var(--button-hover-shadow); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
} }
&:focus { &:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
} }
} }
// Input [type="reset"] // Secondary button without .class
input[type="reset"] { input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer; cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
// --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
}
}
// .secondary, .contrast & .outline
@if $enable-classes {
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
// --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
}
}
// Contrast
&.contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
}
&:focus {
// --box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
&.outline {
--background-color: transparent;
--color: var(--primary);
&:hover,
&:active,
&:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
&.outline.secondary {
--color: var(--secondary);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
&.outline.contrast {
--color: var(--contrast);
&:hover,
&:active,
&:focus {
--color: var(--contrast-hover);
}
}
}
} }
// Button [disabled] // Button [disabled]

60
scss/content/_code.scss
View file

@ -14,8 +14,8 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: var(--code-font); // 1 font-family: var(--font-family); // 1
font-size: 1rem; // 2 font-size: .875rem; // 2
} }
// Prevent overflow of the container in all browsers (opinionated) // Prevent overflow of the container in all browsers (opinionated)
@ -31,49 +31,25 @@ pre {
pre, pre,
code, code,
kbd { kbd {
background: var(--code-inlined); background: var(--code-background-color);
color: var(--code-color-1); color: var(--code-color);
font-size: 85%; font-weight: var(--font-weight);
font-weight: var(--code-weight);
line-height: initial; line-height: initial;
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
} }
code, code,
kbd { kbd {
display: inline-block; display: inline-block;
padding: .375rem .5rem; padding: .375rem .5rem;
border-radius: var(--block-round); border-radius: var(--border-radius);
} }
pre { pre {
display: block; display: block;
margin-bottom: var(--spacing-block); margin-bottom: var(--spacing);
padding: var(--spacing-block) var(--spacing-gutter); padding: var(--spacing);
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background-color);
> code { > code {
display: block; display: block;
@ -84,37 +60,37 @@ pre {
} }
} }
// Code Syntax highlighting // Code Syntax
code { code {
// Tags // Tags
b { b {
color: var(--code-color-2); color: var(--code-tag-color);
font-weight: var(--code-weight); font-weight: var(--font-weight);
} }
// Properties // Properties
i { i {
color: var(--code-color-3); color: var(--code-property-color);
font-style: normal; font-style: normal;
} }
// Values // Values
u { u {
color: var(--code-color-4); color: var(--code-value-color);
text-decoration: none; text-decoration: none;
} }
// Comments // Comments
em { em {
color: var(--code-color-5); color: var(--code-comment-color);
font-style: normal; font-style: normal;
} }
} }
// kbd // kbd
kbd { kbd {
background-color: var(--secondary); background-color: var(--code-kbd-background-color);
color: var(--secondary-inverse); color: var(--code-kbd-color);
font-weight: bolder; vertical-align: middle;
} }

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

@ -10,6 +10,7 @@
&::-webkit-color-swatch-wrapper { &::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
padding: 0; padding: 0;
} }
@ -17,11 +18,12 @@
// Swatch // Swatch
&::-webkit-color-swatch { &::-webkit-color-swatch {
border: none; border: none;
border-radius: calc(var(--block-round)/2); border-radius: calc(var(--border-radius) / 2);
} }
&::-moz-color-swatch { &::-moz-color-swatch {
border: none; border: none;
border-radius: calc(var(--block-round)/2); border-radius: calc(var(--border-radius) / 2);
} }
} }
@ -48,17 +50,29 @@
// File // File
[type="file"] { [type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical)/2) 0; padding: calc(var(--form-element-spacing-vertical)/2) 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: none; background: none;
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); --background-color: var(--secondary);
border: var(--button-border-width) solid var(--secondary-border); --border-color: var(--secondary);
background-color: var(--secondary); --color: var(--secondary-inverse);
box-shadow: var(--button-shadow); margin-right: calc(var(--spacing) / 2);
color: var(--secondary-inverse); padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -72,24 +86,19 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
--color: var(--color);
border: none; border: none;
background: none; background: none;
&::-webkit-file-upload-button { &::-webkit-file-upload-button {
border-color: var(--secondary-hover-border); --background-color: var(--secondary-hover);
background-color: var(--secondary-hover); --border-color: var(--secondary-hover);
}
}
&:focus {
&::-webkit-file-upload-button {
box-shadow: none;
} }
} }
} }
// Range // Range
[type="range"]{ [type="range"] {
// Config // Config
$height-track: .25rem; $height-track: .25rem;
$height-thumb: 1.25rem; $height-thumb: 1.25rem;
@ -108,8 +117,8 @@
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -121,8 +130,8 @@
&::-moz-range-track { &::-moz-range-track {
width: 100%; width: 100%;
height:$height-track; height:$height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -134,8 +143,8 @@
&::-ms-track { &::-ms-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--block-round); border-radius: var(--border-radius);
background-color: var(--input-border); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -145,7 +154,7 @@
} }
&::-ms-fill-lower { &::-ms-fill-lower {
background-color: var(--input-border); background-color: var(--border-radius);
} }
// Slider Thumb // Slider Thumb
@ -154,9 +163,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -171,9 +180,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -188,9 +197,9 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb/2) + ($height-track/2))}; margin-top: #{(-($height-thumb/2) + ($height-track/2))};
border: $border-thumb solid var(--input-background); border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--text); background-color: var(--range-thumb-color);
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
@ -200,62 +209,28 @@
} }
} }
&:hover,
&:focus { &:focus {
--range-border-color: var(--range-active-border-color);
@if $enable-important { --range-thumb-color: var(--range-thumb-hover-color);
background: transparent !important;
}
@else {
background: transparent;
}
// Slider Track
&::-webkit-slider-runnable-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-moz-range-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-ms-track {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
&::-ms-fill-lower {
box-shadow: 0 0 0 0.1rem var(--input-focus);
}
} }
&:active { &:active {
--range-thumb-color: var(--range-thumb-active-color);
@if $enable-important {
background: transparent !important;
}
@else {
background: transparent;
}
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
&::-ms-thumb { &::-ms-thumb {
transform: scale(1.25); transform: scale(1.25);
background-color: var(--primary);
} }
} }
&:focus {
box-shadow: none;
}
} }
// Search // Search
@ -263,15 +238,15 @@
border-radius: 5rem; border-radius: 5rem;
@if $enable-important { @if $enable-important {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-image: var(--icon-search); background-image: var(--icon-search);
background-position: center left .75rem; background-position: center left 1.125rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
} }
// Cancel button // Cancel button
&::-webkit-search-cancel-button{ &::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
display: none; display: none;
} }

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

@ -13,7 +13,7 @@
height: 1.25rem; height: 1.25rem;
margin-top: -.125rem; margin-top: -.125rem;
margin-right: .375rem; margin-right: .375rem;
border-width: var(--checkbox-radio-border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -22,19 +22,16 @@
} }
&:checked, &:checked,
&:indeterminate { &:checked:active,
border-color: var(--input-hover-border); &:checked:focus {
background-color: var(--input-hover-border); --background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75rem auto;
} }
&:indeterminate {
background-image: var(--icon-minus);
}
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375rem;
@ -43,20 +40,36 @@
} }
} }
// Checkboxes
[type="checkbox"] {
&:indeterminate {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
}
}
// Radios // Radios
[type="radio"] { [type="radio"] {
border-radius: 50%; border-radius: 50%;
&:checked { &:checked,
border-width: .33rem; &:checked:active,
border-color: var(--input-hover-border); &:checked:focus{
background-color: var(--input-inverse); --background-color: var(--primary-inverse);
border-width: .35rem;
background-image: none; background-image: none;
} }
} }
// Switchs // Switchs
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
// Config // Config
$switch-height: 1.25rem; $switch-height: 1.25rem;
@ -66,17 +79,27 @@
// Styles // Styles
width: $switch-width; width: $switch-width;
height: $switch-height; height: $switch-height;
border: var(--switch-border-width) solid var(--input-border); border: var(--border-width) solid var(--border-color);
border-radius: $switch-height; border-radius: $switch-height;
background-color: var(--input-border); background-color: var(--background-color);
line-height: $switch-height; line-height: $switch-height;
&:focus {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
}
&:checked {
--background-color: var(--switch-checked-background-color);
--border-color: var(--switch-checked-background-color);
}
&:before { &:before {
display: block; display: block;
width: calc(#{$switch-height} - (var(--switch-border-width)*2)); width: calc(#{$switch-height} - (var(--border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--input-inverse); background-color: var(--color);
content: ''; content: '';
@if $enable-transitions { @if $enable-transitions {
@ -85,13 +108,11 @@
} }
&:checked { &:checked {
border-color: var(--input-hover-border);
background-color: var(--input-hover-border);
background-image: none; background-image: none;
&::before { &::before {
margin-right: 0; margin-right: 0;
margin-left: calc(#{$switch-width/2} - var(--switch-border-width)); margin-left: calc(#{$switch-width / 2} - var(--border-width));
} }
} }
} }

194
scss/content/_form.scss
View file

@ -89,9 +89,9 @@ textarea {
border-style: none; border-style: none;
} }
// Restore the focus outline styles unset by the previous rule in Firefox // Remove the focus outline in Firefox
:-moz-focusring { :-moz-focusring {
outline: 1px dotted ButtonText; outline: none;
} }
// Remove the additional :invalid styles in Firefox // Remove the additional :invalid styles in Firefox
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc( height: calc(
(1rem * var(--line-height)) + (1rem * var(--line-height)) +
(var(--form-element-spacing-vertical) * 2) + (var(--form-element-spacing-vertical) * 2) +
(var(--form-element-border-width) * 2) (var(--border-width) * 2)
); );
} }
// Fieldset // Fieldset
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -136,15 +136,14 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: var(--spacing-form-element); margin-bottom: calc(var(--spacing) / 4);
vertical-align: middle; vertical-align: middle;
} }
// Global layout // Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"]):not([type="radio"]),
select, select,
textarea, textarea {
form small {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -164,13 +163,17 @@ textarea {
input, input,
select, select,
textarea { textarea {
border: var(--form-element-border-width) solid var(--input-border); --background-color: var(--form-element-background-color);
border-radius: var(--block-round); --border-color: var(--form-element-border-color);
--color: var(--form-element-color);
--box-shadow: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none; outline: none;
background-color: var(--input-background); background-color: var(--background-color);
color: var(--text); box-shadow: var(--box-shadow);
font-weight: var(--form-element-weight); color: var(--color);
font-weight: var(--font-weight);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -179,102 +182,106 @@ textarea {
color var(--transition), color var(--transition),
box-shadow var(--transition); box-shadow var(--transition);
} }
}
&::placeholder, // Active & Focus
&::-webkit-input-placeholder { input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
color: var(--muted-text); select,
opacity: 1; textarea {
}
&:active, &:active,
&:focus { &:focus {
border-color: var(--input-hover-border); --background-color: var(--form-element-active-background-color);
background-color: var(--input-hover-background); }
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
--border-color: var(--form-element-active-border-color);
}
}
// Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
select,
textarea {
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
&[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
}
}
// Aria-valid
input,
select,
textarea {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
} }
&[readonly], &[aria-invalid="false"] {
&[disabled] { --border-color: var(--form-element-valid-border-color);
border-color: var(--muted-border); background-image: var(--icon-valid);
box-shadow: none;
& ~ label {
color: var(--muted-text);
}
&:active, &:active,
&:focus { &:focus {
@if $enable-important { @if $enable-important {
box-shadow: none !important; --border-color: var(--form-element-valid-active-border-color) !important;
} }
@else { @else {
box-shadow: none; --border-color: var(--form-element-valid-active-border-color);
} }
} }
} }
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { &[aria-invalid="true"] {
background-color: var(--muted-background); --border-color: var(--form-element-invalid-border-color);
} background-image: var(--icon-invalid);
&[disabled] { &:active,
opacity: .66; &:focus {
} @if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
// Validation states: with aria-invalid only }
@if $enable-classes { @else {
.valid, --border-color: var(--form-element-invalid-active-border-color);
.invalid, }
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
.valid,
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
.invalid,
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
}
// Validation states: with aria-invalid and classes (.valid & .invalid)
@else {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
} }
} }
} }
// Margin bottom (Not Checkboxes andRadios) // Placeholder
input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
color: var(--form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"]):not([type="radio"]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing-typography); margin-bottom: var(--spacing);
}
// Focus styles (Not Range and File)
input:not([type="range"]):not([type="file"]),
select,
textarea {
&:focus {
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
}
} }
// Select // Select
@ -296,16 +303,15 @@ select {
} }
// Helper // Helper
form small {
color: var(--muted-text);
}
input, input,
select, select,
textarea { textarea {
+ small { + small {
margin-top: calc(var(--spacing-typography) * -0.75); display: block;
margin-bottom: var(--spacing-typography); width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
} }
} }
@ -314,6 +320,6 @@ label {
& > input, & > input,
& > select, & > select,
& > textarea { & > textarea {
margin-top: var(--spacing-form-element); margin-top: calc(var(--spacing) / 4);
} }
} }

2
scss/content/_miscs.scss
View file

@ -15,7 +15,7 @@ hr {
height: 0; // 1 height: 0; // 1
overflow: visible; // 2 overflow: visible; // 2
border: none; border: none;
border-top: 1px solid var(--muted-border); border-top: 1px solid var(--muted-border-color);
} }
// Add the correct display in IE 10+ // Add the correct display in IE 10+

36
scss/content/_table.scss
View file

@ -26,32 +26,24 @@ table {
// Cells // Cells
th, th,
td { td {
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: 1px solid var(--table-border); border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--muted-text); color: var(--color);
font-size: 0.875rem; font-size: var(--font-size);
font-weight: var(--text-weight); font-weight: var(--font-weight);
text-align: left; text-align: left;
} }
// Titles // Rows
th, tr {
thead td { background-color: var(--background-color);
color: var(--text);
font-size: 1rem;
} }
// First row // Striped
thead { table {
th, &[role="grid"] {
td { tbody tr:nth-child(odd) {
border-bottom: 3px solid var(--table-border); --background-color: var(--table-row-stripped-background-color);
} }
}
// Striping
table[role="grid"] {
tbody tr:nth-child(odd) {
background-color: var(--table-stripping);
} }
} }

201
scss/content/_typography.scss
View file

@ -61,8 +61,8 @@ pre,
table, table,
ul { ul {
margin-top: 0; margin-top: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
color: var(--text); color: var(--color);
font-size: 1rem; font-size: 1rem;
font-style: normal; font-style: normal;
} }
@ -70,9 +70,12 @@ ul {
// Links // Links
// 1. Remove the gray background on active links in IE 10 // 1. Remove the gray background on active links in IE 10
a { a {
background-color: transparent; // 1 --color: var(--primary);
color: var(--primary); --background-color: transparent;
text-decoration: none; outline: none;
background-color: var(--background-color); // 1
color: var(--color);
text-decoration: var(--text-decoration);
@if $enable-transitions { @if $enable-transitions {
transition: transition:
@ -85,54 +88,49 @@ a {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: var(--primary-hover); --color: var(--primary-hover);
text-decoration: underline; --text-decoration: underline;
} }
&:focus { &:focus {
outline: none; --background-color: var(--primary-focus);
background-color: var(--primary-focus);
} }
}
// Link .secondary @if $enable-classes {
@if $enable-classes {
a.secondary {
color: var(--secondary);
text-decoration: underline;
&:hover, // Secondary
&:active, &.secondary {
&:focus { --color: var(--secondary);
color: var(--secondary-hover);
&:hover,
&:active,
&:focus {
--color: var(--secondary-hover);
}
&:focus {
--background-color: var(--secondary-focus);
}
} }
&:focus { // Contrast
background-color: var(--secondary-focus); &.contrast {
} --color: var(--contrast);
}
}
// Link .contrast &:hover,
@if $enable-classes { &:active,
a.contrast { &:focus {
color: var(--contrast); --color: var(--contrast-hover);
text-decoration: underline; }
&:hover, &:focus {
&:active, --background-color: var(--contrast-focus);
&:focus { }
color: var(--contrast-hover);
}
&:focus {
background-color: var(--contrast-focus);
} }
} }
} }
// Headings // Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1, h1,
h2, h2,
h3, h3,
@ -140,44 +138,30 @@ h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
font-family: var(--titles-font); color: var(--color);
font-weight: var(--titles-weight); font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
} }
h1 { h1 {
margin-bottom: calc(var(--spacing-typography) * 2); --color: var(--h1-color);
color: var(--h1);
font-size: var(--h1-size);
} }
h2 { h2 {
margin-bottom: calc(var(--spacing-typography) * 1.75); --color: var(--h2-color);
color: var(--h2);
font-size: var(--h2-size);
} }
h3 { h3 {
margin-bottom: calc(var(--spacing-typography) * 1.5); --color: var(--h3-color);
color: var(--h3);
font-size: var(--h3-size);
} }
h4 { h4 {
margin-bottom: calc(var(--spacing-typography) * 1.25); --color: var(--h4-color);
color: var(--h4);
font-size: var(--h4-size);
} }
h5 { h5 {
margin-bottom: calc(var(--spacing-typography) * 1.125); --color: var(--h5-color);
color: var(--h5);
font-size: var(--h5-size);
} }
h6 { h6 {
color: var(--h6); --color: var(--h6-color);
font-size: var(--h6-size);
} }
// Margin-top for headings after a typography block // Margin-top for headings after a typography block
@ -191,88 +175,49 @@ p,
pre, pre,
table, table,
ul { ul {
& ~ h1 { & ~ h1,
margin-top: calc(var(--spacing-typography) * 2); & ~ h2,
} & ~ h3,
& ~ h4,
& ~ h2 { & ~ h5,
margin-top: calc(var(--spacing-typography) * 1.75);
}
& ~ h3 {
margin-top: calc(var(--spacing-typography) * 1.5);
}
& ~ h4 {
margin-top: calc(var(--spacing-typography) * 1.25);
}
& ~ h5 {
margin-top: calc(var(--spacing-typography) * 1.125);
}
& ~ h6 { & ~ h6 {
margin-top: calc(var(--spacing-typography)); margin-top: var(--typography-spacing-vertical);
} }
} }
// Heading group
// Multi-level heading
hgroup { hgroup {
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
*{ > * {
margin-bottom: 0; margin-bottom: 0;
} }
> *:last-child { > *:last-child {
color: var(--muted-text); --color: var(--muted-color);
--font-weight: unset;
font-family: unset; font-family: unset;
font-size: 1.125rem; font-size: 1rem;
font-weight: unset;
} }
} }
// Paragraphs // Paragraphs
p { p {
margin-bottom: var(--spacing-typography); margin-bottom: var(--typography-spacing-vertical);
} }
// Small // Small
small { small {
font-size: 85%; font-size: var(--font-size);
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: 83%;
}
}
@if map-get($breakpoints, "md") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: 81%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: 79%;
}
}
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: 77%;
}
}
} }
// Lists // Lists
ul, ul,
ol { ol {
padding-left: var(--spacing-typography); padding-left: var(--spacing);
li { li {
margin-bottom: calc(var(--spacing-typography) / 4); margin-bottom: calc(var(--typography-spacing-vertical) / 4);
} }
} }
@ -280,24 +225,24 @@ ul li {
list-style: square; list-style: square;
} }
// Marked text // Highlighted text
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background-color: var(--mark-background-color);
color: var(--mark-text); color: var(--mark-color);
vertical-align: middle; vertical-align: middle;
} }
// Blockquote // Blockquote
blockquote { blockquote {
display: block; display: block;
margin: var(--spacing-typography) 0; margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing-gutter); padding: var(--spacing);
border-left: .25rem solid var(--muted-border); border-left: .25rem solid var(--blockquote-border-color);
footer { footer {
margin-top: calc(var(--spacing-typography) / 2); margin-top: calc(var(--typography-spacing-vertical) / 2);
color: var(--muted-text); color: var(--blockquote-footer-color);
} }
} }
@ -311,13 +256,13 @@ abbr[title] {
// Ins // Ins
ins { ins {
color: var(--valid); color: var(--ins-color);
text-decoration: none; text-decoration: none;
} }
// del // del
del { del {
color: var(--invalid); color: var(--del-color);
} }
// selection // selection

12
scss/layout/_container.scss
View file

@ -9,13 +9,13 @@
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: var(--spacing-gutter); padding-right: var(--spacing);
padding-left: var(--spacing-gutter); padding-left: var(--spacing);
} }
.container { .container {
@if map-get($breakpoints, "sm") and $enable-viewport { @if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0; padding-right: 0;
@ -23,19 +23,19 @@
} }
} }
@if map-get($breakpoints, "md") and $enable-viewport { @if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md"); max-width: map-get($viewports, "md");
} }
} }
@if map-get($breakpoints, "lg") and $enable-viewport { @if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg"); max-width: map-get($viewports, "lg");
} }
} }
@if map-get($breakpoints, "xl") and $enable-viewport { @if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl"); max-width: map-get($viewports, "xl");
} }

42
scss/layout/_document.scss
View file

@ -36,44 +36,12 @@ html {
-moz-tab-size: 4; // 5 -moz-tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6 -ms-text-size-adjust: 100%; // 6
-webkit-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6
background: var(--background); background-color: var(--background-color);
color: var(--text); color: var(--color);
font-family: var(--text-font); font-family: var(--font-family);
font-size: var(--base-font-xs); font-size: var(--font-size);
font-weight: var(--text-weight); font-weight: var(--font-weight);
line-height: var(--line-height); // 1 line-height: var(--line-height); // 1
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default; // 4 cursor: default; // 4
@if map-get($breakpoints, "sm") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) {
font-size: var(--base-font-sm);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "md")) {
font-size: var(--base-font-md);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "lg")) {
font-size: var(--base-font-lg);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-typography {
@media (min-width: map-get($breakpoints, "xl")) {
font-size: var(--base-font-xl);
}
}
} }

4
scss/layout/_grid.scss
View file

@ -6,8 +6,8 @@
*/ */
.grid { .grid {
grid-column-gap: var(--spacing-gutter); grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--spacing-gutter); grid-row-gap: var(--grid-spacing-vertical);
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 0; margin: 0;

4
scss/layout/_scroller.scss
View file

@ -10,7 +10,7 @@ figure {
overflow-x: auto; overflow-x: auto;
figcaption { figcaption {
padding: calc(var(--spacing-gutter) / 2) 0; padding: calc(var(--spacing) / 2) 0;
color: var(--muted-text); color: var(--muted-color);
} }
} }

34
scss/layout/_section.scss
View file

@ -4,37 +4,5 @@
*/ */
section { section {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); margin-bottom: var(--block-spacing-vertical);
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "sm")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
}
}
@if map-get($breakpoints, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
}
}
@if map-get($breakpoints, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
}
}
@if map-get($breakpoints, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
}
}
} }

95
scss/layout/_sectioning.scss
View file

@ -25,87 +25,48 @@ body {
> header, > header,
> main, > main,
> footer { > footer {
$padding-horizontal: var(--spacing-gutter) !default;
$spacing-vertical: var(--spacing-block) !default;
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
// xs // Semantic container
@if $enable-semantic-container == false { @if $enable-semantic-container {
$padding-horizontal: 0; padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
}
padding: $spacing-vertical $padding-horizontal;
// sm // Centered viewport
@if map-get($breakpoints, "sm") @if $enable-viewport {
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "sm")) { @if map-get($breakpoints, "sm") and $enable-viewport {
@if $enable-viewport and $enable-semantic-container { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
} }
@if $enable-responsive-spacings or $enable-viewport {
@if $enable-viewport or $enable-semantic-container == false { @if map-get($breakpoints, "md") and $enable-viewport {
$padding-horizontal: 0; @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
} }
@else { }
$padding-horizontal: var(--spacing-gutter);
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
} }
@if $enable-responsive-spacings { }
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
} }
@else {
$spacing-vertical: var(--spacing-block);
}
padding: $spacing-vertical $padding-horizontal;
} }
} }
} }
// md // Semantic container
@if map-get($breakpoints, "md") @else {
and ($enable-responsive-spacings or $enable-semantic-container) { padding: var(--block-spacing-vertical) 0;
@media (min-width: map-get($breakpoints, "md")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "md");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
padding: $spacing-vertical $padding-horizontal;
}
}
}
// lg
@if map-get($breakpoints, "lg")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "lg")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "lg");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
padding: $spacing-vertical $padding-horizontal;
}
}
}
// xl
@if map-get($breakpoints, "xl")
and ($enable-responsive-spacings or $enable-semantic-container) {
@media (min-width: map-get($breakpoints, "xl")) {
@if $enable-viewport and $enable-semantic-container {
max-width: map-get($viewports, "xl");
}
@if $enable-responsive-spacings {
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
padding: $spacing-vertical $padding-horizontal;
}
}
} }
} }
} }

2
scss/pico.fluid.classless.scss
View file

@ -4,7 +4,7 @@
// Enable <header>, <main>, <footer> inside <body> as a container // Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: true; $enable-semantic-container: true;
// Enable a centered viewport // Enable a centered viewport for <header>, <main>, <footer> inside <body>
$enable-viewport: false; $enable-viewport: false;
// Enable .classes // Enable .classes

6
scss/pico.scss
View file

@ -1,6 +1,6 @@
/*! /*!
* Pico.css v1.2.1 (https://picocss.com) * Pico.css v1.3.0 (https://picocss.com)
* Copyright 2020 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
// Config // Config
@ -21,7 +21,6 @@
@import "content/typography"; // a, headings, p, ul, blockquote, ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ... @import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/form"; // input, select, textarea, label, fieldset, legend @import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@ -33,7 +32,6 @@
// Components // Components
@import "components/accordion"; // details, summary @import "components/accordion"; // details, summary
@import "components/card"; // article @import "components/card"; // article
@import "components/card-sectioning"; // article > header, footer, pre
@import "components/nav"; // nav @import "components/nav"; // nav
@import "components/progress"; // progress @import "components/progress"; // progress
@import "components/tooltip"; // data-tooltip @import "components/tooltip"; // data-tooltip

15
scss/pico.slim.scss
View file

@ -1,6 +1,6 @@
/*! /*!
* Pico.css v1.2.1 (https://picocss.com) * Pico.css v1.3.0 (https://picocss.com)
* Copyright 2020 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example
* You can export only the modules you need * You can export only the modules you need
@ -13,13 +13,10 @@
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article> // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
$enable-responsive-spacings: false; $enable-responsive-spacings: false;
// Enable validation states for <input> // Enable transitions
$enable-input-states: false;
// Enable transitions for <a>, <button>, <input>, <details>
$enable-transitions: false; $enable-transitions: false;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"]) // Enable overriding with !important
$enable-important: false; $enable-important: false;
@ -36,7 +33,7 @@ $enable-important: false;
@import "layout/document"; // html @import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer @import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid @import "layout/container"; // .container, .container-fluid
// @import "layout/section"; // section @import "layout/section"; // section
@import "layout/grid"; // .grid @import "layout/grid"; // .grid
@import "layout/scroller"; // figure @import "layout/scroller"; // figure
@ -44,7 +41,6 @@ $enable-important: false;
@import "content/typography"; // a, headings, p, ul, blockquote, ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit, ... @import "content/button"; // button, a[role=button], type=button, type=submit, ...
// @import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/form"; // input, select, textarea, label, fieldset, legend @import "content/form"; // input, select, textarea, label, fieldset, legend
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch // @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... // @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@ -56,7 +52,6 @@ $enable-important: false;
// Components // Components
// @import "components/accordion"; // details, summary // @import "components/accordion"; // details, summary
// @import "components/card"; // article // @import "components/card"; // article
// @import "components/card-sectioning"; // article > header, footer, pre
// @import "components/nav"; // nav // @import "components/nav"; // nav
// @import "components/progress"; // progress // @import "components/progress"; // progress
// @import "components/tooltip"; // data-tooltip // @import "components/tooltip"; // data-tooltip

22
scss/themes/default.scss
View file

@ -2,8 +2,28 @@
* Theme: default * Theme: default
*/ */
// Variables
@import "../variables";
@import "default/colors"; @import "default/colors";
// Commons styles
@import "default/styles"; @import "default/styles";
@import "default/icons";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "default/light"; @import "default/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "default/dark"; @import "default/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;
}

44
scss/themes/default/_colors.scss
View file

@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default; $grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue // Light Blue
$primary-hue: 195; $primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default; $primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default; $primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default; $primary-200: hsl($primary-hue, 86%, 77%) !default;
@ -28,10 +28,38 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
$black: #000 !default; $black: #000 !default;
$white: #FFF !default; $white: #FFF !default;
// Miscs // Amber
$amber-200: hsl(45, 100%, 75%) !default; $amber-50: #FFF8E1 !default;
$green-500: hsl(160, 50%, 40%) !default; $amber-100: #FFECB3 !default;
$green-600: hsl(160, 55%, 35%) !default; $amber-200: #FFE082 !default;
$green-700: hsl(160, 60%, 30%) !default; $amber-300: #FFD54F !default;
$red-700: hsl(0, 45%, 50%) !default; $amber-400: #FFCA28 !default;
$red-900: hsl(0, 45%, 40%) !default; $amber-500: #FFC107 !default;
$amber-600: #FFB300 !default;
$amber-700: #FFA000 !default;
$amber-800: #FF8F00 !default;
$amber-900: #FF6F00 !default;
// Green
$green-50: #E8F5E9 !default;
$green-100: #C8E6C9 !default;
$green-200: #A5D6A7 !default;
$green-300: #81C784 !default;
$green-400: #66BB6A !default;
$green-500: #4CAF50 !default;
$green-600: #43A047 !default;
$green-700: #388E3C !default;
$green-800: #2E7D32 !default;
$green-900: #1B5E20 !default;
// Red
$red-50: #FFEBEE !default;
$red-100: #FFCDD2 !default;
$red-200: #EF9A9A !default;
$red-300: #E57373 !default;
$red-400: #EF5350 !default;
$red-500: #F44336 !default;
$red-600: #E53935 !default;
$red-700: #D32F2F !default;
$red-800: #C62828 !default;
$red-900: #B71C1C !default;

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

@ -1,164 +1,129 @@
// Dark theme (Auto) // Default: Dark theme
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) { @mixin dark {
:root:not([data-theme="light"]) {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-border: var(--primary);
--primary-hover: #{$primary-500};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600};
--secondary-border: var(--secondary);
--secondary-hover: #{$grey-500};
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-border: var(--contrast);
--contrast-hover: #{$white};
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .1875)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)};
--code-color-5: #{mix($grey-600, $grey-700)};
// Table
--table-border: #{rgba($grey-500, .075)};
--table-stripping: #{rgba($grey-500, .05)};
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
// Document // Document
--background: #{darken($grey-900, 6%)}; color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};
// Typography // Texts colors
--text: #{$grey-300}; --color: #{$grey-200};
--h1: #{$grey-50}; --h1-color: #{$grey-50};
--h2: #{$grey-100}; --h2-color: #{mix($grey-100, $grey-50)};
--h3: #{$grey-200}; --h3-color: #{$grey-100};
--h4: #{$grey-300}; --h4-color: #{mix($grey-200, $grey-100)};
--h5: #{$grey-400}; --h5-color: #{$grey-200};
--h6: #{$grey-500}; --h6-color: #{mix($grey-300, $grey-200)};
// Primary Call-to-Action and links // Muted colors
--primary: #{$primary-600}; --muted-color: #{$grey-500};
--primary-border: var(--primary); --muted-border-color: #{mix($grey-900, $grey-800, 75%)};
--primary-hover: #{$primary-500};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // Primary colors
--secondary: #{$grey-600}; --primary: #{$primary-600};
--secondary-border: var(--secondary); --primary-hover: #{$primary-500};
--secondary-hover: #{$grey-500}; --primary-focus: #{rgba($primary-600, .25)};
--secondary-hover-border: var(--secondary-hover); --primary-inverse: #{$white};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Secondary colors
--contrast: #{$grey-100}; --secondary: #{$grey-600};
--contrast-border: var(--contrast); --secondary-hover: #{$grey-500};
--contrast-hover: #{$white}; --secondary-focus: #{rgba($grey-500, .25)};
--contrast-hover-border: var(--contrast-hover); --secondary-inverse: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements // Contrast colors
--input-background: #{darken($grey-900, 6%)}; --contrast: #{$grey-50};
--input-border: #{mix($grey-800, $grey-700)}; --contrast-hover: #{$white};
--input-hover-background: var(--input-background); --contrast-focus: #{rgba($grey-500, .25)};
--input-hover-border: var(--primary); --contrast-inverse: #{$black};
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse); // Highlighted text (<mark>)
--mark-background-color: #{mix($grey-300, $amber-300)};
--mark-color: #{mix($black, $grey-900, 37.5%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Button // Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Utilities states // Form elements
--valid: #{$green-700}; --form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--invalid: #{$red-900}; --form-element-border-color: #{mix($grey-800, $grey-700)};
--mark: #{rgba($amber-200, .1875)}; --form-element-color: var(--color);
--mark-text: #{$white}; --form-element-placeholder-color: var(--muted-color);
--muted-text: #{$grey-500}; --form-element-active-background-color: var(--form-element-background-color);
--muted-background: #{mix($grey-800, $grey-900)}; --form-element-active-border-color: var(--primary);
--muted-border: #{mix($grey-800, $grey-900)}; --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-700};
// Card // Switch (input[type="checkbox"][role="switch"])
--card-background: #{darken($grey-900, 2%)}; --switch-background-color: #{mix($grey-800, $grey-700)};
--card-sections: #{darken($grey-900, 4%)}; --switch-color: var(--primary-inverse);
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)}; --switch-checked-background-color: var(--primary);
// Code // Range (input[type="range"])
--code-background: #{darken($grey-900, 4%)}; --range-border-color: #{mix($grey-900, $grey-800)};
--code-inlined: #{rgba($grey-700, .25)}; --range-active-border-color: #{$grey-800};
--code-color-1: #{$grey-500}; --range-thumb-border-color: var(--background-color);
--code-color-2: #{hsl(330, 30%, 50%)}; --range-thumb-color: var(--secondary);
--code-color-3: #{hsl(185, 30%, 50%)}; --range-thumb-hover-color: var(--secondary-hover);
--code-color-4: #{hsl(40, 10%, 50%)}; --range-thumb-active-color: var(--primary);
--code-color-5: #{mix($grey-600, $grey-700)};
// Table // Table
--table-border: #{rgba($grey-500, .075)}; --table-border-color: var(--muted-border-color);
--table-stripping: #{rgba($grey-500, .05)}; --table-row-stripped-background-color: #{rgba($grey-500, .05)};
// Code
--code-background-color: #{mix($black, $grey-900, 12.5%)};
--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: #{mix($grey-700, $grey-600)};
// Accordion (<details>)
--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 (<article>)
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-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='#{rgba($grey-300, .999)}' 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-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='#{rgba($grey-300, .999)}' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='#{rgba($green-800, .999)}' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }

13
scss/themes/default/_icons.scss
View file

@ -1,13 +0,0 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' 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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='#{rgba($green-600, .999)}' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

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

@ -1,81 +1,128 @@
// Light theme (Default) // Default: Light theme
// Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
// Document // Document
--background: #{$white}; color-scheme: light;
--background-color: #{$white};
// Typography // Texts colors
--text: #{$grey-700}; --color: #{$grey-700};
--h1: #{$grey-900}; --h1-color: #{$grey-900};
--h2: #{$grey-800}; --h2-color: #{mix($grey-900, $grey-800)};
--h3: #{$grey-700}; --h3-color: #{$grey-800};
--h4: #{$grey-600}; --h4-color: #{mix($grey-800, $grey-700)};
--h5: #{$grey-500}; --h5-color: #{$grey-700};
--h6: #{$grey-400}; --h6-color: #{mix($grey-700, $grey-600)};
// Primary Call-to-Action and links // Muted colors
--primary: #{$primary-600}; --muted-color: #{$grey-500};
--primary-border: var(--primary); --muted-border-color: #{$grey-50};
--primary-hover: #{$primary-700};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // Primary colors
--secondary: #{$grey-500}; --primary: #{$primary-600};
--secondary-border: var(--secondary); --primary-hover: #{$primary-700};
--secondary-hover: #{$grey-700}; --primary-focus: #{rgba($primary-600, .125)};
--secondary-hover-border: var(--secondary-hover); --primary-inverse: #{$white};
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Secondary colors
--contrast: #{$grey-800}; --secondary: #{$grey-600};
--contrast-border: var(--contrast); --secondary-hover: #{$grey-700};
--contrast-hover: #{mix($grey-900, $black)}; --secondary-focus: #{rgba($grey-600, .125)};
--contrast-hover-border: var(--contrast-hover); --secondary-inverse: #{$white};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-inverse: #{$white};
// Form elements // Contrast colors
--input-background: #{$white}; --contrast: #{$grey-900};
--input-border: #{mix($grey-100, $grey-200)}; --contrast-hover: #{$black};
--input-hover-background: var(--input-background); --contrast-focus: #{rgba($grey-600, .125)};
--input-hover-border: var(--primary); --contrast-inverse: #{$white};
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse); // Highlighted text (<mark>)
--mark-background-color: #{mix($amber-100, $amber-50)};
--mark-color: #{mix($grey-900, $amber-900, 75%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Button // Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Utilities states // Form elements
--valid: #{$green-600}; --form-element-background-color: transparent;
--invalid: #{$red-700}; --form-element-border-color: #{$grey-300};
--mark: #{rgba($amber-200, .33)}; --form-element-color: var(--color);
--mark-text: #{$grey-800}; --form-element-placeholder-color: var(--muted-color);
--muted-text: #{mix($grey-400, $grey-500)}; --form-element-active-background-color: transparent;
--muted-background: #{$grey-50}; --form-element-active-border-color: var(--primary);
--muted-border: #{$grey-50}; --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700};
--form-element-valid-active-border-color: #{$green-800};
// Card // Switch (input[type="checkbox"][role="switch"])
--card-background: #{$white}; --switch-background-color: #{$grey-200};
--card-sections: #{lighten($grey-50, 2%)}; --switch-color: var(--primary-inverse);
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)}; --switch-checked-background-color: var(--primary);
// Code // Range (input[type="range"])
--code-background: #{lighten($grey-50, 2%)}; --range-border-color: #{$grey-100};
--code-inlined: #{$grey-50}; --range-active-border-color: #{$grey-200};
--code-color-1: #{$grey-500}; --range-thumb-border-color: var(--background-color);
--code-color-2: #{hsl(330, 40%, 50%)}; --range-thumb-color: var(--secondary);
--code-color-3: #{hsl(185, 40%, 40%)}; --range-thumb-hover-color: var(--secondary-hover);
--code-color-4: #{hsl(40, 20%, 50%)}; --range-thumb-active-color: var(--primary);
--code-color-5: #{mix($grey-300, $grey-400)};
// Table // Table
--table-border: #{rgba($grey-50, .75)}; --table-border-color: var(--muted-border-color);
--table-stripping: #{rgba($grey-500, .075)}; --table-row-stripped-background-color:#{mix($grey-50, $white)};
// Code
--code-background-color: #{$grey-50};
--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: #{$grey-300};
// Accordion (<details>)
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Progress
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-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='#{rgba($grey-700, .999)}' 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-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='#{rgba($grey-700, .999)}' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-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='%23FFF' 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-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='#{rgba($green-700, .999)}' 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");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }

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

@ -1,93 +1,214 @@
// Commons Styles // Commons Styles
:root { :root {
// Typography // Typography
// –––––––––––––––––––– --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;
// Fonts family // Responsive typography
// Source: github.com/csstools/sanitize.css/blob/master/typography.css @if $enable-responsive-typography {
--text-font: 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";
--titles-font: var(--text-font);
--code-font: "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";
// Typography styles @if map-get($breakpoints, "sm") {
--line-height: 1.5; @media (min-width: map-get($breakpoints, "sm")) {
--text-weight: 400; --font-size: 17px;
--titles-weight: 700; }
--form-element-weight: var(--text-weight); }
--buttons-weight: var(--text-weight);
--code-weight: var(--text-weight);
// Base font sizes @if map-get($breakpoints, "md") {
// All the others sizes are relative to this font base sizes (rem) @media (min-width: map-get($breakpoints, "md")) {
--base-font-xs: 16px; --font-size: 18px;
--base-font-sm: 17px; }
--base-font-md: 18px; }
--base-font-lg: 19px;
--base-font-xl: 20px;
// Font sizes @if map-get($breakpoints, "lg") {
// All the others sizes are relative to this sizes @media (min-width: map-get($breakpoints, "lg")) {
--h1-size: 2rem; --font-size: 19px;
--h2-size: 1.75rem; }
--h3-size: 1.5rem; }
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--h6-size: 1rem;
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--font-size: 20px;
}
}
}
// Styles // Borders
// –––––––––––––––––––– --border-radius: .25rem;
--border-width: 1px;
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip] --outline-width: 3px;
--block-round: .25rem;
// Form elements
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
--switch-border-width: 3px;
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Buttons
--button-round: var(--block-round);
--button-border-width: var(--form-element-border-width);
--button-outline-width: var(--form-element-outline-width);
--button-spacing-vertical: var(--form-element-spacing-vertical);
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
// Spacings // Spacings
// –––––––––––––––––––– --spacing: 1rem;
// Gutters and horizontals margins // Spacings for typography elements
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre> --typography-spacing-vertical: 1.5rem;
--spacing-gutter: 1rem;
// Vertical spacing for blocks // Spacings for body > header, body > main, body > footer, section, article
// For <header>, <main>, <footer>, <section>, <article> --block-spacing-vertical: calc(var(--spacing) * 2);
--spacing-block: 2rem; --block-spacing-horizontal: var(--spacing);
// Multiplication factor for --spacing-block // Spacings .grid
// '1' disable spacing factor on a breakpoint --grid-spacing-vertical: 0;
--spacing-factor-xs: 1; --grid-spacing-horizontal: var(--spacing);
--spacing-factor-sm: 1.25;
--spacing-factor-md: 1.5;
--spacing-factor-lg: 1.75;
--spacing-factor-xl: 2;
// Vertical margins for typography elements
--spacing-typography: 1.5rem;
// Spacing between <form> elements
--spacing-form-element: .25rem;
// Spacings for form elements and button
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Transitions // Transitions
// –––––––––––––––––––– --transition: .2s ease-in-out;
}
// Transitions: <a>, <form> elements and <button>
--transition: .2s ease-in-out; // Responsives spacings
@if $enable-responsive-spacings {
// Sectionning
body > header,
body > main,
body > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
}
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
}
}
// Link
a {
--text-decoration: none;
// Secondary & Contrast
&.secondary,
&.contrast {
--text-decoration: underline;
}
}
// Small
small {
--font-size: 87.5%;
}
// Headings
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;
}
// Forms elements
[type="checkbox"],
[type="radio"] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
--border-width: 3px;
}
// Table
table {
thead {
th,
td {
--border-width: 3px;
}
}
:not(thead) td {
--font-size: 0.875rem;
}
}
// Code
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;
} }