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

Merge 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
Copyright (c) 2019-2020 Pico
Copyright (c) 2019-2021 Pico
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

72
README.md
View file

@ -13,44 +13,97 @@
<a href="https://picocss.com/docs/">Documentation</a>
</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)
[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
**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
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.
```html
<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.
```html
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
```
### Install with NPM
**Install with NPM**
```shell
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
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)
- [Buttons](https://picocss.com/docs/#buttons)
- [Forms](https://picocss.com/docs/#forms)
- [Tables](https://picocss.com/docs/#tables)
**Components**
- [Accordions](https://picocss.com/docs/#accordions)
- [Cards](https://picocss.com/docs/#cards)
- [Navs](https://picocss.com/docs/#navs)
- [Progress](https://picocss.com/docs/#progress)
- [Tooltips](https://picocss.com/docs/#tooltips)
## 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
*/
: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";
--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";
--line-height: 1.5;
--text-weight: 400;
--titles-weight: 700;
--form-element-weight: var(--text-weight);
--buttons-weight: var(--text-weight);
--code-weight: var(--text-weight);
--base-font-xs: 16px;
--base-font-sm: 17px;
--base-font-md: 18px;
--base-font-lg: 19px;
--base-font-xl: 20px;
--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;
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
--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);
--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;
--transition: .2s ease-in-out;
}
: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(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");
--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");
--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");
--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");
--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");
@media (min-width: 576px) {
:root {
--font-size: 17px;
}
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
}
}
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@media (min-width: 576px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 992px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@media (min-width: 1200px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
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"],
:root:not([data-theme="dark"]) {
--background: #FFF;
--text: #415462;
--h1: #1b2832;
--h2: #2c3d49;
--h3: #415462;
--h4: #596b78;
--h5: #73828c;
--h6: #8a99a3;
--primary: #1095c1;
--primary-border: var(--primary);
--primary-hover: #08769b;
--primary-hover-border: var(--primary-hover);
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--secondary: #73828c;
--secondary-border: var(--secondary);
--secondary-hover: #415462;
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: rgba(115, 130, 140, 0.125);
--secondary-inverse: #FFF;
--contrast: #2c3d49;
--contrast-border: var(--contrast);
--contrast-hover: #0d1419;
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
--muted-border: #edf0f3;
--card-background: #FFF;
--card-sections: #f3f5f7;
--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);
--code-background: #f3f5f7;
--code-inlined: #edf0f3;
--code-color-1: #73828c;
--code-color-2: #b34d80;
--code-color-3: #3d888f;
--code-color-4: #998866;
--code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(115, 130, 140, 0.075);
color-scheme: light;
--background-color: #FFF;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #23333e;
--h3-color: #2c3d49;
--h4-color: #374956;
--h5-color: #415462;
--h6-color: #4d606d;
--muted-color: #73828c;
--muted-border-color: #edf0f3;
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--mark-background-color: #fff2ca;
--mark-color: #543a25;
--ins-color: #388E3C;
--del-color: #C62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent;
--form-element-border-color: #a2afb9;
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #d5dce2;
--range-active-border-color: #bbc6ce;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--code-background-color: #edf0f3;
--code-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) {
:root:not([data-theme="light"]) {
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-border: var(--primary);
--primary-hover: #1ab3e6;
--primary-hover-border: var(--primary-hover);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596b78;
--secondary-border: var(--secondary);
--secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: rgba(89, 107, 120, 0.25);
--secondary-inverse: #FFF;
--contrast: #d5dce2;
--contrast-border: var(--contrast);
--contrast-hover: #FFF;
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--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);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: rgba(115, 130, 140, 0.075);
--table-stripping: rgba(115, 130, 140, 0.05);
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f;
--form-element-border-color: #374956;
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #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"] {
--background: #10181e;
--text: #a2afb9;
--h1: #edf0f3;
--h2: #d5dce2;
--h3: #bbc6ce;
--h4: #a2afb9;
--h5: #8a99a3;
--h6: #73828c;
--primary: #1095c1;
--primary-border: var(--primary);
--primary-hover: #1ab3e6;
--primary-hover-border: var(--primary-hover);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596b78;
--secondary-border: var(--secondary);
--secondary-hover: #73828c;
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: rgba(89, 107, 120, 0.25);
--secondary-inverse: #FFF;
--contrast: #d5dce2;
--contrast-border: var(--contrast);
--contrast-hover: #FFF;
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
--muted-border: #23333e;
--card-background: #17232b;
--card-sections: #141d24;
--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);
--code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c;
--code-color-2: #a65980;
--code-color-3: #599fa6;
--code-color-4: #8c8473;
--code-color-5: #4d606d;
--table-border: rgba(115, 130, 140, 0.075);
--table-stripping: rgba(115, 130, 140, 0.05);
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f;
--form-element-border-color: #374956;
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #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"],
:root:not([data-theme="dark"]) {
--nav-background: rgba(255, 255, 255, 0.7);
--nav-border: rgba(115, 130, 140, 0.2);
--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"]) {
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border: rgba(115, 130, 140, 0.2);
--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: 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)
*/
body > main {
padding-top: calc(1rem * var(--spacing-factor-xs) + 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);
}
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 992px) {
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;
grid-template-columns: 200px auto;
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
}
}
@media (min-width: 1200px) {
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;
}
div[role="document"] > section::before {
display: block;
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
content: '';
}
@media (min-width: 576px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
height: calc(4rem + 3.5rem - .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: '';
}
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
svg {
height: 1rem;
}
@ -133,11 +126,11 @@ svg {
*/
main > aside nav {
width: 100%;
margin-bottom: var(--spacing-block);
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav h1 {
margin-bottom: var(--spacing-typography);
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: 992px) {
@ -184,7 +177,7 @@ main > aside details {
}
main > aside details summary {
color: var(--h3);
color: var(--h3-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
@ -195,7 +188,7 @@ main > aside details summary::after {
}
main > aside details[open] summary {
color: var(--h3);
color: var(--h3-color);
}
/**
@ -217,8 +210,8 @@ main > aside details[open] summary {
#customization figure {
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: var(--block-round);
border-top-left-radius: var(--block-round);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
}
@ -260,10 +253,14 @@ main > aside details[open] summary {
border-color: var(--primary);
}
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button {
display: block;
width: 100%;
margin-bottom: calc(var(--spacing-typography) / 2);
margin-bottom: var(--spacing);
}
@media (min-width: 576px) {
@ -283,13 +280,15 @@ main > aside details[open] summary {
}
#grids .grid > * {
padding: calc(var(--spacing-gutter) / 2) 0;
background: var(--code-background);
padding: calc(var(--spacing) / 2) 0;
border-radius: var(--border-radius);
background: var(--code-background-color);
font-size: 87.5%;
text-align: center;
}
#grids details {
margin-top: calc(var(--spacing-typography) * 2);
margin-top: calc(var(--typography-spacing-vertical) * 2);
}
#grids details svg {
@ -304,12 +303,12 @@ main > aside details[open] summary {
* Docs: Typography
*/
section > hgroup {
margin-bottom: calc(var(--spacing-typography) * 2);
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--spacing-typography) / 4);
margin-bottom: var(--spacing-typography);
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] section > h1,
@ -321,28 +320,11 @@ a[role=button] {
/**
* Docs: Code
*/
@media (min-width: 576px) {
pre {
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
}
}
@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));
}
section > pre {
margin: var(--block-spacing-vertical) 0;
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);
}
[data-theme="invalid"],
@ -367,8 +349,8 @@ a[role=button] {
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -378,12 +360,12 @@ a[role=button] {
}
[data-theme="invalid"]:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
[data-theme="valid"]:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
@ -398,8 +380,8 @@ body > nav {
right: 0;
left: 0;
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background);
box-shadow: 0px 1px 0 var(--nav-border);
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
}
body > nav a {
@ -413,10 +395,10 @@ body > nav svg {
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing-gutter) * -1);
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1);
color: var(--background);
background: var(--h1-color);
color: var(--nav-logo-color);
}
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) {
display: none;
margin-left: var(--spacing-gutter);
color: var(--h1);
margin-left: var(--spacing);
color: var(--h1-color);
}
@media (min-width: 992px) {
@ -440,13 +422,13 @@ body > nav ul:first-of-type li:nth-of-type(2) {
*/
.switcher {
position: fixed;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
right: calc(var(--spacing) / 2);
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
@ -484,16 +466,16 @@ body > nav ul:first-of-type li:nth-of-type(2) {
.switcher:hover i {
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);
}
.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) {
.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>
<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="">
<title>Pico.css • Graceful & Minimal CSS design system</title>
<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>head</b>&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>title</b>>Hello, world!&lt;/<b>title</b>&gt;
&lt;/<b>head</b>&gt;
@ -191,9 +191,60 @@
</label>
</fieldset>
</form>
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c500">...</u>;
}
</code></pre>
</article>
<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>Compile the SASS file to CSS to get a custom version of Pico.</p>
@ -221,66 +272,31 @@
</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>
<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 -->
<!-- Docs: Classless -->
<section id="classless">
<hgroup>
<h2>Class-less version</h2>
<h3>For wild HTML purists!</h3>
</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><strong>Usage:</strong></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>
<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>
<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 -->
<!-- Docs: Container -->
@ -297,7 +313,7 @@
&lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;&lt;/<b>main</b>&gt;
&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>
<table role="grid">
<thead>
@ -321,7 +337,7 @@
</tr>
<tr>
<th>Viewport</th>
<td>None&nbsp;<small>(auto)</small></td>
<td>100<small>%</small></td>
<td>540<small>px</small></td>
<td>720<small>px</small></td>
<td>960<small>px</small></td>
@ -452,7 +468,7 @@
<section id="typography">
<hgroup>
<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>
<figure>
<table role="grid">
@ -476,7 +492,7 @@
<td>20<small>px</small></td>
</tr>
<tr>
<th>h1</th>
<th><code>&lt;<b>h1</b>&gt;</code></th>
<td>32<small>px</small></td>
<td>34<small>px</small></td>
<td>36<small>px</small></td>
@ -484,45 +500,53 @@
<td>40<small>px</small></td>
</tr>
<tr>
<th>h2</th>
<th><code>&lt;<b>h2</b>&gt;</code></th>
<td>28<small>px</small></td>
<td>29<small>px</small></td>
<td>31.5<small>px</small></td>
<td>33.25<small>px</small></td>
<td>31<small><small>.5px</small></td>
<td>33<small>.25px</small></td>
<td>35<small>px</small></td>
</tr>
<tr>
<th>h3</th>
<th><code>&lt;<b>h3</b>&gt;</code></th>
<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>28.5<small>px</small></td>
<td>28<small>.5px</small></td>
<td>30<small>px</small></td>
</tr>
<tr>
<th>h4</th>
<th><code>&lt;<b>h4</b>&gt;</code></th>
<td>20<small>px</small></td>
<td>21.25<small>px</small></td>
<td>22.5<small>px</small></td>
<td>23.75<small>px</small></td>
<td>21<small>.25px</small></td>
<td>22<small>.5px</small></td>
<td>23<small>.75px</small></td>
<td>25<small>px</small></td>
</tr>
<tr>
<th>h5</th>
<th><code>&lt;<b>h5</b>&gt;</code></th>
<td>18<small>px</small></td>
<td>19.125<small>px</small></td>
<td>20.25<small>px</small></td>
<td>21.375<small>px</small></td>
<td>22.5<small>px</small></td>
<td>19<small>.125px</small></td>
<td>20<small>.25px</small></td>
<td>21<small>.375px</small></td>
<td>22<small>.5px</small></td>
</tr>
<tr>
<th>h6</th>
<th><code>&lt;<b>h6</b>&gt;</code></th>
<td>16<small>px</small></td>
<td>17<small>px</small></td>
<td>18<small>px</small></td>
<td>19<small>px</small></td>
<td>20<small>px</small></td>
</tr>
<tr>
<th><code>&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>
</table>
</figure>
@ -543,7 +567,7 @@
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</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">
<hgroup>
<h2>Heading 2</h2>
@ -656,7 +680,7 @@
<section id="forms">
<hgroup>
<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>
<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>
@ -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><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
<article aria-label="Select, radios, checkboxes, switch examples">
<label for="country">Country</label>
<select id="country">
<option selected>Choose...</option>
<option>...</option>
<label for="fruit">Fruit</label>
<select id="fruit" required>
<option value="" selected>Select a fruit...</option>
<option>Banana</option>
<option>Watermelon</option>
<option>Apple</option>
<option>Orange</option>
<option>Mangoe</option>
</select>
<fieldset>
<legend>Gender</legend>
<label for="male">
<input type="radio" id="male" name="gender" value="male" checked>
Male
<legend>Size</legend>
<label for="small">
<input type="radio" id="small" name="size" value="small" checked>
Small
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="female">
Female
<label for="medium">
<input type="radio" id="medium" name="size" value="medium">
Medium
</label>
<label for="other">
<input type="radio" id="other" name="gender" value="other">
Other
<label for="large">
<input type="radio" id="large" name="size" value="large">
Large
</label>
</fieldset>
<fieldset>
@ -759,26 +787,26 @@
</fieldset>
<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>select</b> <i>id</i>=<u>"country</u>"&gt;
&lt;<b>option</b> <i>selected</i>&gt;Choose...&lt;/<b>option</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>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>select</b>&gt;
<em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt;
&lt;<b>legend</b>&gt;Gender&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"male"</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;
Male
&lt;<b>legend</b>&gt;Size&lt;/<b>legend</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"female"</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;
Female
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"other"</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;
Other
&lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;
@ -1015,7 +1043,7 @@
<section id="cards">
<hgroup>
<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>
<article aria-label="Card example">
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>
<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">
<header>Header</header>
Body
<footer>Footer</footer>
</article>
<pre><code>&lt;<b>article</b>&gt;
&lt;<b>header</b>&gt;Header&lt;/<b>header</b>&gt;
Body
&lt;<b>footer</b>&gt;Footer&lt;/<b>footer</b>&gt;
&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
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
// @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
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {

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

@ -2,7 +2,7 @@
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
* Copyright 2019-2021 - Licensed under MIT
*/
(function() {
@ -291,19 +291,6 @@
"a700": "#dd2c00",
"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": {
"50": "#fafafa",
"100": "#f5f5f5",
@ -458,7 +445,7 @@
// Update CSS Style
var generatedStyles = '[data-theme="generated"] {'
+ '--h4:' + data[700] + ';'
+ '--h4-color:' + data[700] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
@ -467,7 +454,7 @@
+ '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--h4:' + data[400] + ';'
+ '--h4-color:' + data[400] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -476,7 +463,7 @@
+ '}'
+ '[data-theme="dark"] [data-theme="generated"] {'
+ '--h4:' + data[500] + ';'
+ '--h4-color:' + data[500] + ';'
+ '--primary:' + data[600] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@ -484,11 +471,10 @@
+ '}'
+ '[data-theme="generated"] {'
+ '--primary-border: var(--primary);'
+ '--primary-hover-border: var(--primary-hover);'
+ '--input-hover-border: var(--primary);'
+ '--input-focus: var(--primary-focus);'
+ '--input-inverse: var(--primary-inverse);'
+ '--form-element-active-border-color: var(--primary);'
+ '--form-element-focus-color: var(--primary-focus);'
+ '--switch-color: var(--primary-inverse);'
+ '--switch-checked-background-color: var(--primary);'
+ '}';
// Insert CSS Styles

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

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

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

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

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

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

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

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

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

@ -4,13 +4,13 @@
.switcher {
position: fixed;
right: calc(var(--spacing-gutter) / 2);
bottom: var(--spacing-gutter);
right: calc(var(--spacing) / 2);
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
border-radius: 2rem;
box-shadow: var(--card-shadow);
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
@ -53,18 +53,17 @@
i {
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);
}
}
&: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: 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
*/
// Custom spacings for <pre> (vertically aligned with <article> content)
pre {
@if map-get($breakpoints, "sm") and
$enable-responsive-spacings {
@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));
}
}
// Custom spacings for <pre> (Horizontally aligned with <article> content)
section > pre {
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
box-shadow: var(--card-box-shadow);
}
// Badge for Valid & Invalid code
@ -57,8 +29,8 @@ pre {
line-height: 1;
@media (min-width: map-get($breakpoints, "lg")) {
top: var(--spacing-gutter);
right: var(--spacing-gutter);
top: var(--spacing);
right: var(--spacing);
}
}
@ -71,14 +43,14 @@ pre {
// Color for Valid & Invalid code
[data-theme="invalid"] {
&:before {
background: var(--invalid);
background: var(--invalid-color);
content: 'Not so great';
}
}
[data-theme="valid"] {
&:before {
background: var(--valid);
background: var(--valid-color);
content: 'Great';
}
}

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

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

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

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

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

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

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

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

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

@ -2,8 +2,11 @@
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, .5)};
--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]
// Enabled if forced with 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-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
// Source: https://feathericons.com/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{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");

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

@ -2,6 +2,9 @@
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
--nav-background: #{rgba($white, .7)};
--nav-border: #{rgba($grey-500, .2)};
--invalid-color: #{$red-800};
--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",
"version": "1.2.1",
"version": "1.3.0",
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche",
"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-class-container: true !default;
// Enable a centered viewport
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Fluid layout if disabled
$enable-viewport: true !default;
@ -16,20 +16,17 @@ $enable-viewport: true !default;
$enable-responsive-spacings: true !default;
// Enable responsive typography
// Fixed base font if disabled
// Fixed root element size if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Enable validation states for <input>
$enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>
// Enable transitions
$enable-transitions: true !default;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
// Enable overriding with !important
$enable-important: true !default;

26
scss/components/_accordion.scss
View file

@ -5,22 +5,30 @@
details {
display: block;
margin-bottom: var(--spacing-typography);
padding-bottom: calc(var(--spacing-typography) / 2);
border-bottom: 1px solid var(--muted-border);
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing) / 2);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
color: var(--accordion-close-summary-color);
line-height: 1rem;
list-style-type: none;
list-style-type: none;
cursor: pointer;
@if $enable-transitions {
transition: color var(--transition);
}
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
@ -45,10 +53,11 @@ details {
&:focus {
outline: none;
color: var(--accordion-active-summary-color);
}
~ * {
margin-top: calc(var(--spacing-typography) / 2);
margin-top: calc(var(--spacing) / 2);
~ * {
margin-top: 0;
@ -59,9 +68,12 @@ details {
// Open
&[open] {
summary {
margin-bottom: calc(var(--spacing-typography) / 4);
color: var(--muted-text);
> summary {
margin-bottom: calc(var(--spacing) / 4);
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
&::after {
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 {
margin: var(--spacing-block) 0;
padding: var(--spacing-block) var(--spacing-gutter);
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
overflow: hidden;
border-radius: var(--block-round);
background: var(--card-background);
box-shadow: var(--card-shadow);
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if $enable-responsive-spacings {
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
}
@else {
margin: var(--spacing-block) 0;
padding: var(--spacing-block);
}
}
> header,
> footer,
> pre {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}
@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)) 0;
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
}
> header {
margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color);
}
@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)) 0;
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;
}
> footer,
> pre {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);
}
}

35
scss/components/_nav.scss
View file

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

21
scss/components/_progress.scss
View file

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

21
scss/components/_tooltip.scss
View file

@ -21,12 +21,12 @@
padding: .25rem .5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: var(--block-round);
background: var(--contrast);
color: var(--contrast-inverse);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
color: var(--tooltip-color);
font-size: .85rem;
font-style: normal;
font-weight: var(--text-weight);
font-weight: var(--font-weight);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -44,9 +44,8 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
color: var(--contrast);
color: var(--tooltip-background-color);
content: '';
}
&:focus,
@ -56,8 +55,8 @@
opacity: 1;
@if $enable-transitions {
animation-duration: .2s;
animation-name: slide;
animation-duration: .2s;
}
}
@ -73,12 +72,12 @@
@if $enable-transitions {
@keyframes slide {
from {
opacity: 0;
transform: translate(-50%, .75rem);
opacity: 0;
}
to {
opacity: 1;
transform: translate(-50%, -.25rem);
opacity: 1;
}
}
@ -87,12 +86,12 @@
opacity: 0;
}
50% {
opacity: 0;
transform: translate(-50%, -.25rem);
opacity: 0;
}
to {
opacity: 1;
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
// - 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="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
padding: 0;
border-style: none;
}
@ -42,7 +42,7 @@ button::-moz-focus-inner,
button {
display: block;
width: 100%;
margin-bottom: var(--spacing-typography);
margin-bottom: var(--spacing);
}
a[role="button"] {
@ -54,17 +54,20 @@ button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[type="file"]::-webkit-file-upload-button,
a[role="button"] {
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
border: var(--button-border-width) solid var(--primary-border);
border-radius: var(--button-round);
--background-color: var(--primary);
--border-color: var(--primary);
--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;
background-color: var(--primary);
box-shadow: var(--button-shadow);
color: var(--primary-inverse);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--buttons-weight);
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@ -80,19 +83,118 @@ a[role="button"] {
&:hover,
&:active,
&:focus {
border-color: var(--primary-hover-border);
background-color: var(--primary-hover);
box-shadow: var(--button-hover-shadow);
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
}
&: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"] {
--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);
}
}
// .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]

60
scss/content/_code.scss
View file

@ -14,8 +14,8 @@ pre,
code,
kbd,
samp {
font-family: var(--code-font); // 1
font-size: 1rem; // 2
font-family: var(--font-family); // 1
font-size: .875rem; // 2
}
// Prevent overflow of the container in all browsers (opinionated)
@ -31,49 +31,25 @@ pre {
pre,
code,
kbd {
background: var(--code-inlined);
color: var(--code-color-1);
font-size: 85%;
font-weight: var(--code-weight);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
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,
kbd {
display: inline-block;
padding: .375rem .5rem;
border-radius: var(--block-round);
border-radius: var(--border-radius);
}
pre {
display: block;
margin-bottom: var(--spacing-block);
padding: var(--spacing-block) var(--spacing-gutter);
margin-bottom: var(--spacing);
padding: var(--spacing);
overflow-x: auto;
background: var(--code-background);
background: var(--code-background-color);
> code {
display: block;
@ -84,37 +60,37 @@ pre {
}
}
// Code Syntax highlighting
// Code Syntax
code {
// Tags
b {
color: var(--code-color-2);
font-weight: var(--code-weight);
color: var(--code-tag-color);
font-weight: var(--font-weight);
}
// Properties
i {
color: var(--code-color-3);
color: var(--code-property-color);
font-style: normal;
}
// Values
u {
color: var(--code-color-4);
color: var(--code-value-color);
text-decoration: none;
}
// Comments
em {
color: var(--code-color-5);
color: var(--code-comment-color);
font-style: normal;
}
}
// kbd
kbd {
background-color: var(--secondary);
color: var(--secondary-inverse);
font-weight: bolder;
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: middle;
}

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

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

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

@ -13,7 +13,7 @@
height: 1.25rem;
margin-top: -.125rem;
margin-right: .375rem;
border-width: var(--checkbox-radio-border-width);
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -22,19 +22,16 @@
}
&:checked,
&:indeterminate {
border-color: var(--input-hover-border);
background-color: var(--input-hover-border);
&:checked:active,
&:checked:focus {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
}
&:indeterminate {
background-image: var(--icon-minus);
}
& ~ label {
display: inline-block;
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
[type="radio"] {
border-radius: 50%;
&:checked {
border-width: .33rem;
border-color: var(--input-hover-border);
background-color: var(--input-inverse);
&:checked,
&:checked:active,
&:checked:focus{
--background-color: var(--primary-inverse);
border-width: .35rem;
background-image: none;
}
}
// Switchs
[type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
// Config
$switch-height: 1.25rem;
@ -66,17 +79,27 @@
// Styles
width: $switch-width;
height: $switch-height;
border: var(--switch-border-width) solid var(--input-border);
border: var(--border-width) solid var(--border-color);
border-radius: $switch-height;
background-color: var(--input-border);
background-color: var(--background-color);
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 {
display: block;
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
width: calc(#{$switch-height} - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--input-inverse);
background-color: var(--color);
content: '';
@if $enable-transitions {
@ -85,13 +108,11 @@
}
&:checked {
border-color: var(--input-hover-border);
background-color: var(--input-hover-border);
background-image: none;
&::before {
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;
}
// Restore the focus outline styles unset by the previous rule in Firefox
// Remove the focus outline in Firefox
:-moz-focusring {
outline: 1px dotted ButtonText;
outline: none;
}
// Remove the additional :invalid styles in Firefox
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc(
(1rem * var(--line-height)) +
(var(--form-element-spacing-vertical) * 2) +
(var(--form-element-border-width) * 2)
(var(--border-width) * 2)
);
}
// Fieldset
fieldset {
margin: 0;
margin-bottom: var(--spacing-typography);
margin-bottom: var(--spacing);
padding: 0;
border: 0;
}
@ -136,15 +136,14 @@ fieldset {
label,
fieldset legend {
display: block;
margin-bottom: var(--spacing-form-element);
margin-bottom: calc(var(--spacing) / 4);
vertical-align: middle;
}
// Global layout
// Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
form small {
textarea {
display: block;
width: 100%;
}
@ -164,13 +163,17 @@ textarea {
input,
select,
textarea {
border: var(--form-element-border-width) solid var(--input-border);
border-radius: var(--block-round);
--background-color: var(--form-element-background-color);
--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;
background-color: var(--input-background);
color: var(--text);
font-weight: var(--form-element-weight);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
@if $enable-transitions {
transition:
@ -179,102 +182,106 @@ textarea {
color var(--transition),
box-shadow var(--transition);
}
}
&::placeholder,
&::-webkit-input-placeholder {
color: var(--muted-text);
opacity: 1;
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
border-color: var(--input-hover-border);
background-color: var(--input-hover-background);
--background-color: var(--form-element-active-background-color);
}
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
--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],
&[disabled] {
border-color: var(--muted-border);
box-shadow: none;
& ~ label {
color: var(--muted-text);
}
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
&:active,
&:focus {
@if $enable-important {
box-shadow: none !important;
--border-color: var(--form-element-valid-active-border-color) !important;
}
@else {
box-shadow: none;
--border-color: var(--form-element-valid-active-border-color);
}
}
}
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
background-color: var(--muted-background);
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
&[disabled] {
opacity: .66;
}
// Validation states: with aria-invalid only
@if $enable-classes {
.valid,
.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);
&:active,
&:focus {
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
}
@else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
}
}
// 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"]),
select,
textarea {
margin-bottom: var(--spacing-typography);
}
// 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);
}
margin-bottom: var(--spacing);
}
// Select
@ -296,16 +303,15 @@ select {
}
// Helper
form small {
color: var(--muted-text);
}
input,
select,
textarea {
+ small {
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
}
}
@ -314,6 +320,6 @@ label {
& > input,
& > select,
& > 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
overflow: visible; // 2
border: none;
border-top: 1px solid var(--muted-border);
border-top: 1px solid var(--muted-border-color);
}
// Add the correct display in IE 10+

36
scss/content/_table.scss
View file

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

201
scss/content/_typography.scss
View file

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

12
scss/layout/_container.scss
View file

@ -9,13 +9,13 @@
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--spacing-gutter);
padding-left: var(--spacing-gutter);
padding-right: var(--spacing);
padding-left: var(--spacing);
}
.container {
@if map-get($breakpoints, "sm") and $enable-viewport {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
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")) {
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")) {
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")) {
max-width: map-get($viewports, "xl");
}

42
scss/layout/_document.scss
View file

@ -36,44 +36,12 @@ html {
-moz-tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
-webkit-text-size-adjust: 100%; // 6
background: var(--background);
color: var(--text);
font-family: var(--text-font);
font-size: var(--base-font-xs);
font-weight: var(--text-weight);
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height); // 1
text-rendering: optimizeLegibility;
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-column-gap: var(--spacing-gutter);
grid-row-gap: var(--spacing-gutter);
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
display: grid;
grid-template-columns: 1fr;
margin: 0;

4
scss/layout/_scroller.scss
View file

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

34
scss/layout/_section.scss
View file

@ -4,37 +4,5 @@
*/
section {
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
@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);
}
}
margin-bottom: var(--block-spacing-vertical);
}

95
scss/layout/_sectioning.scss
View file

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

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

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

6
scss/pico.scss
View file

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

15
scss/pico.slim.scss
View file

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

22
scss/themes/default.scss
View file

@ -2,8 +2,28 @@
* Theme: default
*/
// Variables
@import "../variables";
@import "default/colors";
// Commons styles
@import "default/styles";
@import "default/icons";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "default/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@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;
// Light Blue
$primary-hue: 195;
$primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
@ -28,10 +28,38 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
$black: #000 !default;
$white: #FFF !default;
// Miscs
$amber-200: hsl(45, 100%, 75%) !default;
$green-500: hsl(160, 50%, 40%) !default;
$green-600: hsl(160, 55%, 35%) !default;
$green-700: hsl(160, 60%, 30%) !default;
$red-700: hsl(0, 45%, 50%) !default;
$red-900: hsl(0, 45%, 40%) !default;
// Amber
$amber-50: #FFF8E1 !default;
$amber-100: #FFECB3 !default;
$amber-200: #FFE082 !default;
$amber-300: #FFD54F !default;
$amber-400: #FFCA28 !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)
// Automatically enabled if user has Dark mode enabled
// Default: Dark theme
@media only screen and (prefers-color-scheme: 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"] {
@mixin dark {
// Document
--background: #{darken($grey-900, 6%)};
color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
// Texts colors
--color: #{$grey-200};
--h1-color: #{$grey-50};
--h2-color: #{mix($grey-100, $grey-50)};
--h3-color: #{$grey-100};
--h4-color: #{mix($grey-200, $grey-100)};
--h5-color: #{$grey-200};
--h6-color: #{mix($grey-300, $grey-200)};
// 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};
// Muted colors
--muted-color: #{$grey-500};
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
// 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};
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-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%)};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-500, .25)};
--secondary-inverse: #{$white};
// 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);
// Contrast colors
--contrast: #{$grey-50};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, .25)};
--contrast-inverse: #{$black};
// 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-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-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)'
// 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
--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)};
// Form elements
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--form-element-border-color: #{mix($grey-800, $grey-700)};
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$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
--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)};
// Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{mix($grey-800, $grey-700)};
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// 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)};
// Range (input[type="range"])
--range-border-color: #{mix($grey-900, $grey-800)};
--range-active-border-color: #{$grey-800};
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Table
--table-border: #{rgba($grey-500, .075)};
--table-stripping: #{rgba($grey-500, .05)};
--table-border-color: var(--muted-border-color);
--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)
// Can be forced with data-theme="light"
// Default: Light theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
--background: #{$white};
color-scheme: light;
--background-color: #{$white};
// Typography
--text: #{$grey-700};
--h1: #{$grey-900};
--h2: #{$grey-800};
--h3: #{$grey-700};
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
// Texts colors
--color: #{$grey-700};
--h1-color: #{$grey-900};
--h2-color: #{mix($grey-900, $grey-800)};
--h3-color: #{$grey-800};
--h4-color: #{mix($grey-800, $grey-700)};
--h5-color: #{$grey-700};
--h6-color: #{mix($grey-700, $grey-600)};
// Primary Call-to-Action and links
--primary: #{$primary-600};
--primary-border: var(--primary);
--primary-hover: #{$primary-700};
--primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Muted colors
--muted-color: #{$grey-500};
--muted-border-color: #{$grey-50};
// Secondary Call-to-Action, links and kbd
--secondary: #{$grey-500};
--secondary-border: var(--secondary);
--secondary-hover: #{$grey-700};
--secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-800};
--contrast-border: var(--contrast);
--contrast-hover: #{mix($grey-900, $black)};
--contrast-hover-border: var(--contrast-hover);
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-600, .125)};
--secondary-inverse: #{$white};
// Form elements
--input-background: #{$white};
--input-border: #{mix($grey-100, $grey-200)};
--input-hover-background: var(--input-background);
--input-hover-border: var(--primary);
--input-focus: var(--primary-focus);
--input-inverse: var(--primary-inverse);
// Contrast colors
--contrast: #{$grey-900};
--contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, .125)};
--contrast-inverse: #{$white};
// 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-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-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)'
// 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
--valid: #{$green-600};
--invalid: #{$red-700};
--mark: #{rgba($amber-200, .33)};
--mark-text: #{$grey-800};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};
--muted-border: #{$grey-50};
// Form elements
--form-element-background-color: transparent;
--form-element-border-color: #{$grey-300};
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$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
--card-background: #{$white};
--card-sections: #{lighten($grey-50, 2%)};
--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 (input[type="checkbox"][role="switch"])
--switch-background-color: #{$grey-200};
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-inlined: #{$grey-50};
--code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 40%, 50%)};
--code-color-3: #{hsl(185, 40%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)};
// Range (input[type="range"])
--range-border-color: #{$grey-100};
--range-active-border-color: #{$grey-200};
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Table
--table-border: #{rgba($grey-50, .75)};
--table-stripping: #{rgba($grey-500, .075)};
--table-border-color: var(--muted-border-color);
--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
:root {
// 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
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
--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";
// Responsive typography
@if $enable-responsive-typography {
// Typography styles
--line-height: 1.5;
--text-weight: 400;
--titles-weight: 700;
--form-element-weight: var(--text-weight);
--buttons-weight: var(--text-weight);
--code-weight: var(--text-weight);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--font-size: 17px;
}
}
// Base font sizes
// All the others sizes are relative to this font base sizes (rem)
--base-font-xs: 16px;
--base-font-sm: 17px;
--base-font-md: 18px;
--base-font-lg: 19px;
--base-font-xl: 20px;
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--font-size: 18px;
}
}
// Font sizes
// All the others sizes are relative to this sizes
--h1-size: 2rem;
--h2-size: 1.75rem;
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--h6-size: 1rem;
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--font-size: 19px;
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--font-size: 20px;
}
}
}
// Styles
// ––––––––––––––––––––
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
--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);
// Borders
--border-radius: .25rem;
--border-width: 1px;
--outline-width: 3px;
// Spacings
// ––––––––––––––––––––
--spacing: 1rem;
// Gutters and horizontals margins
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
--spacing-gutter: 1rem;
// Spacings for typography elements
--typography-spacing-vertical: 1.5rem;
// Vertical spacing for blocks
// For <header>, <main>, <footer>, <section>, <article>
--spacing-block: 2rem;
// Spacings for body > header, body > main, body > footer, section, article
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
// Multiplication factor for --spacing-block
// '1' disable spacing factor on a breakpoint
--spacing-factor-xs: 1;
--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 .grid
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
// Spacings for form elements and button
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Transitions
// ––––––––––––––––––––
// Transitions: <a>, <form> elements and <button>
--transition: .2s ease-in-out;
--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;
}