Compare commits
12 commits
feat/pico-
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| bf03e8b5a9 | |||
| d73dfb4742 | |||
| d4044a7486 | |||
| 0992ff34c4 | |||
| 3df895f734 | |||
| c43009bbb3 | |||
| da5da9fd62 | |||
| 5572f70e96 | |||
| d82786784b | |||
| d00009a594 | |||
| 50dc772a71 | |||
|
d87213881f |
113 changed files with 224 additions and 6327 deletions
|
|
@ -13,7 +13,7 @@ jobs:
|
|||
build:
|
||||
runs-on: docker
|
||||
container:
|
||||
image: hugomods/hugo:exts-0.158.0
|
||||
image: hugomods/hugo:exts-0.148.1
|
||||
steps:
|
||||
- name: Pipeline info
|
||||
run: |
|
||||
|
|
|
|||
98
README.md
98
README.md
|
|
@ -29,27 +29,60 @@ To populate the calendar data, please run `./fetch-calendar.sh` before running h
|
|||
Running the hugo command without and parameters will re-generate the site in the `public` directory.
|
||||
To deploy the website, just copy the whole folder to a directory which is servered by the webserver of your preference.
|
||||
|
||||
Please note, that the website should be re-deployed at least daily to update the "announcement" section on the front page even if there were no changed to the content.
|
||||
Please note that the website should be re-deployed at least daily to update the "announcement" section on the front page even if there were no changed to the content.
|
||||
See [Automated Deployment](#automated-deployment) for the way the deployment is set up on git.hamburg.ccc.de
|
||||
|
||||
### Add Pages
|
||||
### Previewing Changes Locally
|
||||
|
||||
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
||||
Note that you also need to install the [Dart Sass compiler](https://sass-lang.com/dart-sass/).
|
||||
|
||||
To build the website and run a development webserver, execute:
|
||||
```shell
|
||||
hugo server
|
||||
hugo server --buildFuture --buildDrafts
|
||||
```
|
||||
|
||||
To also build posts in the future or in draft state, run this instead:
|
||||
Note: the flags `--buildFuture --buildDrafts` makes Hugo process all content, even if the `publishDate` is still in the future, or the content is marked as `draft: true` in the frontmatter.
|
||||
You usually want these flags, especially if you are preparing content that should only be shown after a certain date.
|
||||
|
||||
Also see [Submitting Your Content](#submitting-your-content) below.
|
||||
|
||||
### Adding Content
|
||||
|
||||
There are two basic types of posts: Events and blog posts.
|
||||
Hugo and the template set distinguish between these two types based on frontmatter information.
|
||||
When manually creating content, you need to take extra care to use the correct frontmatter data.
|
||||
See the link to the Hugo archetypes below for details.
|
||||
|
||||
**If at all possible, use `hugo new content` with the appropriate parameters to create the new content file correctly.**
|
||||
|
||||
You should always set these frontmatter fields:
|
||||
* `categories`: must be either `article` or `event`; see below.
|
||||
* `date`: the date displayed for this content.
|
||||
For events, that should be when the event takes place; for blog posts, it is when the post was written.
|
||||
* `publishDate`: the date and time the content should be published.
|
||||
Note that if you do not specify a `publishDate`, the value of `date` will be used.
|
||||
* `title`: the headline of your content.
|
||||
|
||||
#### Add a Blog Entry
|
||||
|
||||
Blog posts (the archetype is called `article`) should be used for information that will be relevant for a longer period, for example explanations about technical, political or cultural topics.
|
||||
Articles will be shown for a few days on the home page.
|
||||
The [blog page](https://hamburg.ccc.de/blog/) shows all posts, newest first.
|
||||
In addition, the `tags:` can be used to find blog posts about certain topics.
|
||||
|
||||
To create a new general blog post, run a command like this:
|
||||
```shell
|
||||
hugo server -D
|
||||
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.md
|
||||
```
|
||||
|
||||
If you want to create a blog post from scratch, or convert an event into a blog post, see the frontmatter data in [themes/ccchh/archetypes/article.md](themes/ccchh/archetypes/article.md).
|
||||
In particular, you need to set `categories: article`.
|
||||
You do not need to specify an explicit `publishDate`, as the value of `date` will be used as a fallback.
|
||||
|
||||
#### Add an Event Announcement
|
||||
|
||||
There are two basic types of posts: Events and articles.
|
||||
Events will be shown on the home page from their publishing date until they have happened and shall be used for things which happen at a certain date.
|
||||
Events will be shown on the home page from the frontmatter `publishDate:` until the `date:` (plus a few hours grace period).
|
||||
Use them for information that is relevant for a specific event, like a talk or a meeting.
|
||||
|
||||
This is not limited to events organized by the CCCHH, but can also be a hint to other events which we think are related to our activities.
|
||||
|
||||
To create a new event blog post, run a command like this:
|
||||
|
|
@ -57,29 +90,48 @@ To create a new event blog post, run a command like this:
|
|||
hugo new content --kind event blog/yyyy/yyyy-mm-dd-your-event-title/index.md
|
||||
```
|
||||
|
||||
#### Add a Blog Entry
|
||||
|
||||
As mentioned before, you can also create blog posts for things which aren't events.
|
||||
They will only be shown in the "blog" section and posted to the RSS feeds and shall be used for things which are relevant for a longer time.
|
||||
|
||||
As we have much more event announcements than articles, finding articles in all blog posts can be quite a challenge.
|
||||
But using these two categories enables filtering, so that the history of articles is in one list.
|
||||
|
||||
To create a new general blog post, run a command like this:
|
||||
```shell
|
||||
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.md
|
||||
```
|
||||
If you want to create an event from scratch, or convert a blog post into an event, see the frontmatter data in [themes/ccchh/archetypes/event.md](themes/ccchh/archetypes/event.md).
|
||||
In particular, you need to set `categories: event`, `date:` for the date of the event, `publishDate:` for the date the content should be published, and `location:` to whereever your event takes place.
|
||||
|
||||
#### Additional Notes on Events and Articles
|
||||
|
||||
By default the first 70 words are shown as a summary on list pages.
|
||||
Please use `<!--more-->` to manually separate the summary from other post content.
|
||||
Please use `<!--more-->` (white space matters) to manually separate the summary from other post content.
|
||||
|
||||
Please prefix your folder name with a date to make browsing the content in the source code easier.
|
||||
The date in the URL will be taken from the `date` field in the front matter.
|
||||
|
||||
Blog posts from before 2024-01-22 were imported from the previous website and have additional front matter data which is not usually needed (e.g. the lastmod value).
|
||||
When using the commands above, the template shall have evenything you need.
|
||||
|
||||
#### Submitting Your Content
|
||||
|
||||
After creating the new content, or making changes to existing content please commit your changes with a meaningful commit message to a fresh branch.
|
||||
Name the branch in a way that makes it easy to understand what the changes are, for example, the title of your new blog post.
|
||||
|
||||
Push the branch to git.hamburg.ccc.de, and create a new pull request.
|
||||
Invite reviewers, or post the link to the PR to the [#infrastruktur:hamburg.ccc.de](https://matrix.to/#/#infrastruktur:hamburg.ccc.de) Matrix channel.
|
||||
|
||||
The changes you have made will be deployed to the staging website automatically (this might take a minute or two).
|
||||
See the comments in the PR for the link to your preview.
|
||||
You and the reviewers can use the link to preview the changes.
|
||||
|
||||
If you have set a `publishDate` to a date and time in the future, the preview will show the content as it would appear then.
|
||||
|
||||
Once at least one reviewer approves the PR, it will be merged and pushed to production.
|
||||
This usually takes less than five minutes.
|
||||
|
||||
### Automated Deployment
|
||||
|
||||
The website is automatically rebuilt and redeployed every 20 minutes. At each build and deploy:
|
||||
* The event calendar is fetched.
|
||||
* Hugo renders all pages.
|
||||
* All changed files are deployed to the production web server.
|
||||
|
||||
See [.forgejo/workflows/deploy.yaml](.forgejo/workflows/deploy.yaml) for all the details.
|
||||
|
||||
Additionally, for each pull request, a version of the website is deployed to the staging website under a unique URL.
|
||||
The pull request will be updated with the URL, so you and the reviewers can look at the changes as they will appear after merging.
|
||||
After the PR is closed, the staging URL will be removed.
|
||||
|
||||
#### Populate the Event Calendar
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,3 @@ title: "CCC Hansestadt Hamburg e.V."
|
|||
date: 2022-11-20T09:03:20-08:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Über uns
|
||||
Wir sind der Chaos Computer Club der Hansestadt Hamburg.
|
||||
Bei uns handelt es sich um eine Gruppe von Menschen, die ein Interesse am kreativen Umgang mit Technik teilen.
|
||||
Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik.
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
categories: article
|
||||
title: 'DIDAY.org mit Unterstützung des CCCHH'
|
||||
date: '2026-06-07T14:00:00+02:00' # date of the event
|
||||
publishDate: '2026-06-07T14:00:00+02:00' # when to publish
|
||||
draft: false
|
||||
location: Z9
|
||||
authors:
|
||||
- stb
|
||||
tags:
|
||||
|
|
|
|||
30
content/blog/2026/2026-06-13-ueberwachungsfrei/index.md
Normal file
30
content/blog/2026/2026-06-13-ueberwachungsfrei/index.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Demo-Aufruf: Überwachungsfrei in Hamburg'
|
||||
date: '2026-06-20T14:00:00+02:00'
|
||||
publishDate: '2026-06-13T12:00:00+02:00'
|
||||
draft: false
|
||||
location: Hansaplatz
|
||||
authors:
|
||||
- stb
|
||||
tags:
|
||||
- event
|
||||
- überwachung
|
||||
- vorratsdatenspeicherung
|
||||
- widerstand
|
||||
---
|
||||
**tl;dr** Kundgebung auf dem Hansaplatz am Samstag, 20.6., 14 Uhr, um weitreichende Überwachung in Deutschland und in Hamburg zu verhindern. Alle Infos: [Überwachungsfrei.eu](https://überwachungsfrei.eu).
|
||||
|
||||
Bund und Länder treiben neue Überwachungsgesetze voran. Dazu gehören biometrische Rasterfahndung, automatisierte Massendatenauswertung, die Erhebung von Bewegungsdaten aus Fahrzeugen, Vorratsdatenspeicherung und Chatkontrolle. Hinzu kommt die Auswertung von Standortdaten aus Apps, ganz ohne gesetzliche Grundlage, sowie das Training intransparenter „KIs“ mit den frisch gesammelten Daten.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Gleichzeitig geraten soziale Probleme aus dem Fokus. Technische Überwachung wird als Lösung gesellschaftlicher und sozialer Herausforderungen betrachtet. Doch mehr Überwachung führt nicht zu mehr sozialer Sicherheit. Sie verschiebt Probleme, statt sie zu lösen, und verändert das Verhältnis zwischen Staat und Bevölkerung grundlegend. Schritt für Schritt wird alltägliches Verhalten unter Beobachtung gestellt und Freiheit eingeschränkt.
|
||||
|
||||
Kaum ein Ort in Hamburg verdeutlicht diese Entwicklung so sehr wie der Hansaplatz. Seit 2023 wird hier das Verhalten aller, die sich auf dem Platz aufhalten, durch Kameras und automatisierte Systeme erfasst und ausgewertet. Was als Ausnahme begann, wird nun zum Normalzustand: Kontinuierliche Beobachtung im öffentlichen Raum.
|
||||
|
||||
Wir setzen uns für den Schutz von Grundrechten und informationeller Selbstbestimmung ein. Für öffentliche Räume, in denen Menschen sich frei bewegen, austauschen und engagieren können, ohne permanent beobachtet und bewertet zu werden. Wir wollen eine Politik, die die Ursachen gesellschaftlicher Probleme angeht, statt immer neue Überwachungsmaßnahmen einzuführen.
|
||||
|
||||
Wir wollen das nicht hinnehmen.
|
||||
|
||||
Daher gehen wir auf die Straße. Am 20.06. um 14 Uhr in Hamburg, auf dem Hansaplatz.
|
||||
|
|
@ -20,6 +20,7 @@ Bei uns in den Räumen werden wir am *28.06.2026* an der Mitgliederversammlung d
|
|||
<!--more-->
|
||||
|
||||
Die MV findet primär online statt, es gibt aber bei uns die Möglichkeit dieser zusammen im Hauptraum beizuwohnen und die Geschehnisse mitzuverfolgen.
|
||||
Wenn ihr daran teilnehmen wollt, füllt bitte einmal das [Anmeldeformular](https://cloud.hamburg.ccc.de/apps/forms/s/jqmsHCSGR3S8brGfjZkwnfpa) aus, damit wir eine Idee haben wie viele Leute wir erwarten müssen.
|
||||
|
||||
## Wie funktioniert die Codeberg MV?
|
||||
|
||||
|
|
|
|||
10
content/home/1a-about/index.md
Normal file
10
content/home/1a-about/index.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Über uns"
|
||||
date: 2026-06-13T00:00:00-02:00
|
||||
draft: false
|
||||
headless: true
|
||||
---
|
||||
|
||||
Wir sind der Chaos Computer Club der Hansestadt Hamburg:
|
||||
Eine Gruppe von Menschen, die ein Interesse am kreativen Umgang mit Technik teilen.
|
||||
Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik.
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: "Crypto-Gruppe"
|
||||
title: "Digitale Selbstverteidigung"
|
||||
draft: false
|
||||
headless: true
|
||||
type: card
|
||||
image: cryptoparty-300x100.png
|
||||
#image: cryptoparty-300x100.png
|
||||
link: https://wiki.hamburg.ccc.de/club:cryptogruppe:start
|
||||
---
|
||||
|
||||
Die Cryptogruppe befasst sich mit digitaler Selbstverteidigung und veranstaltet u.a. Cryptoparties in Hamburg.
|
||||
Die Gruppe befasst sich mit Datenschutz, Verschlüsselung, Backup-Strategien und vielem mehr.
|
||||
10
content/home/3-gruppen/6-netzpolitischer-abend..md
Normal file
10
content/home/3-gruppen/6-netzpolitischer-abend..md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Digitale Selbstverteidigung"
|
||||
draft: false
|
||||
headless: true
|
||||
type: card
|
||||
# image: TODO
|
||||
link: https://wiki.hamburg.ccc.de/club:cryptogruppe:start
|
||||
---
|
||||
|
||||
Wir diskutieren mit Menschen aus der Region über netzpolitische Fragestellungen, z. B. die Digitalisierung der Hamburger Verwaltung, neue Überwachung und Polizeibefugnisse, oder die Auswirkungen von KI auf das Leben in Hamburg.
|
||||
10
content/home/3-gruppen/7-selfhosting.md
Normal file
10
content/home/3-gruppen/7-selfhosting.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Selfhosting Usergroup"
|
||||
draft: false
|
||||
headless: true
|
||||
type: card
|
||||
# image: TODO
|
||||
link: https://wiki.hamburg.ccc.de/club:selfhosting:start
|
||||
---
|
||||
|
||||
Wer seine eigenen (Heim-)Server betreiben möchte, und hinter die Kulissen der grafischen Oberflächen schauen möchte, ist hier richtig.
|
||||
10
content/home/3-gruppen/8-ham-radio.md
Normal file
10
content/home/3-gruppen/8-ham-radio.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Funkamateure"
|
||||
draft: false
|
||||
headless: true
|
||||
type: card
|
||||
# image: TODO
|
||||
link: https://wiki.hamburg.ccc.de/club:amateurfunk:start
|
||||
---
|
||||
|
||||
Kreativer Umgang mit Technik? Machen die Funkamateure seid über 100 Jahren, und natürlich auch bei uns im CCCHH.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
baseURL = 'https://hamburg.ccc.de/'
|
||||
locale = 'de-de'
|
||||
languageCode = 'de-de'
|
||||
defaultContentLanguage = 'de'
|
||||
timeZone = 'Europe/Berlin'
|
||||
title = 'CCC Hansestadt Hamburg e.V.'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.13 (https://picocss.com)
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
* Pico CSS v1.5.11 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.13 (https://picocss.com)
|
||||
* Copyright 2019-2024 - Licensed under MIT
|
||||
* Pico CSS v1.5.11 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
module.exports = {
|
||||
syntax: "postcss-scss",
|
||||
map: false,
|
||||
plugins: {
|
||||
"css-declaration-sorter": {
|
||||
order: "smacss"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019-2024 Pico
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
@use "helpers/copyright";
|
||||
|
||||
// Config
|
||||
@forward "settings";
|
||||
|
||||
// Theming
|
||||
@use "themes/default";
|
||||
|
||||
// Layout
|
||||
@use "layout/document"; // html
|
||||
@use "layout/landmarks"; // body, header, main, footer
|
||||
@use "layout/section"; // section
|
||||
@use "layout/container"; // .container, .container-fluid
|
||||
@use "layout/grid"; // .grid
|
||||
@use "layout/overflow-auto"; // .overflow-auto
|
||||
|
||||
// Content
|
||||
@use "content/typography"; // headings, p, ul, blockquote, ...
|
||||
@use "content/link"; // a, role="link"
|
||||
@use "content/button"; // button, role="button", type="button", type="submit" ...
|
||||
@use "content/table"; // table, tr, td, ...
|
||||
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@use "content/code"; // pre, code, ...
|
||||
@use "content/figure"; // figure, figcaption
|
||||
@use "content/misc"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Forms
|
||||
@use "forms/basics"; // input, select, textarea, label, fieldset, legend
|
||||
@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
|
||||
@use "forms/input-color"; // type="color"
|
||||
@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
|
||||
@use "forms/input-file"; // type="file"
|
||||
@use "forms/input-range"; // type="range"
|
||||
@use "forms/input-search"; // type="search"
|
||||
|
||||
// Components
|
||||
@use "components/accordion"; // details, summary
|
||||
@use "components/card"; // article
|
||||
@use "components/dropdown"; // details.dropdown
|
||||
@use "components/group"; // role="group"
|
||||
@use "components/loading"; // aria-busy=true
|
||||
@use "components/modal"; // dialog
|
||||
@use "components/nav"; // nav
|
||||
@use "components/progress"; // progress
|
||||
@use "components/tooltip"; // data-tooltip
|
||||
|
||||
// Utilities
|
||||
@use "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@use "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
@use "sass:map";
|
||||
|
||||
// Settings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Theme color
|
||||
$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
|
||||
|
||||
// Prefix for CSS variables
|
||||
$css-var-prefix: "--pico-" !default; // Must start with "--"
|
||||
|
||||
// Define the root element used to target <header>, <main>, <footer>
|
||||
// with $enable-semantic-container and $enable-responsive-spacings
|
||||
$semantic-root-element: "body" !default;
|
||||
|
||||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||
$enable-semantic-container: false !default;
|
||||
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
|
||||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
// Fixed spacings by default
|
||||
$enable-responsive-spacings: false !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed root element size (rem) if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
||||
// Enable .classes
|
||||
// .classless version if disabled
|
||||
$enable-classes: true !default;
|
||||
|
||||
// Enable transitions
|
||||
$enable-transitions: true !default;
|
||||
|
||||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
// Optional parent selector
|
||||
// If defined, all HTML tags are wrapped with this selector
|
||||
// :root is not wrapped
|
||||
$parent-selector: "" !default;
|
||||
|
||||
// Breakpoints, viewports and root font size
|
||||
$breakpoints: () !default;
|
||||
$breakpoints: map.deep-merge(
|
||||
(
|
||||
// Small (landscape phones)
|
||||
// Font size: 17px
|
||||
sm: (
|
||||
breakpoint: 576px,
|
||||
viewport: 510px,
|
||||
root-font-size: 106.25%,
|
||||
),
|
||||
|
||||
// Medium (tablets)
|
||||
// Font size: 18px
|
||||
md: (
|
||||
breakpoint: 768px,
|
||||
viewport: 700px,
|
||||
root-font-size: 112.5%,
|
||||
),
|
||||
|
||||
// Large
|
||||
// Font size: 19px
|
||||
lg: (
|
||||
breakpoint: 1024px,
|
||||
viewport: 950px,
|
||||
root-font-size: 118.75%,
|
||||
),
|
||||
|
||||
// Extra large
|
||||
// Font size: 20px
|
||||
xl: (
|
||||
breakpoint: 1280px,
|
||||
viewport: 1200px,
|
||||
root-font-size: 125%,
|
||||
),
|
||||
|
||||
// Extra extra large
|
||||
// Font size: 21px
|
||||
xxl: (
|
||||
breakpoint: 1536px,
|
||||
viewport: 1450px,
|
||||
root-font-size: 131.25%,
|
||||
)
|
||||
),
|
||||
$breakpoints
|
||||
);
|
||||
|
||||
// Modules to export
|
||||
$modules: () !default;
|
||||
$modules: map.merge(
|
||||
(
|
||||
// Theme
|
||||
"themes/default": true,
|
||||
|
||||
// Layout
|
||||
"layout/document": true,
|
||||
"layout/landmarks": true,
|
||||
"layout/container": true,
|
||||
"layout/section": true,
|
||||
"layout/grid": true,
|
||||
"layout/overflow-auto": true,
|
||||
|
||||
// Content
|
||||
"content/link": true,
|
||||
"content/typography": true,
|
||||
"content/embedded": true,
|
||||
"content/button": true,
|
||||
"content/table": true,
|
||||
"content/code": true,
|
||||
"content/figure": true,
|
||||
"content/misc": true,
|
||||
|
||||
// Forms
|
||||
"forms/basics": true,
|
||||
"forms/checkbox-radio-switch": true,
|
||||
"forms/input-color": true,
|
||||
"forms/input-date": true,
|
||||
"forms/input-file": true,
|
||||
"forms/input-range": true,
|
||||
"forms/input-search": true,
|
||||
|
||||
// Components
|
||||
"components/accordion": true,
|
||||
"components/card": true,
|
||||
"components/dropdown": true,
|
||||
"components/group": true,
|
||||
"components/loading": true,
|
||||
"components/modal": true,
|
||||
"components/nav": true,
|
||||
"components/progress": true,
|
||||
"components/tooltip": true,
|
||||
|
||||
// Utilities
|
||||
"utilities/accessibility": true,
|
||||
"utilities/reduce-motion": true
|
||||
),
|
||||
$modules
|
||||
);
|
||||
|
|
@ -1,886 +0,0 @@
|
|||
// B&W
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
// Red
|
||||
$red-950: #1c0d06;
|
||||
$red-900: #30130a;
|
||||
$red-850: #45150c;
|
||||
$red-800: #5c160d;
|
||||
$red-750: #72170f;
|
||||
$red-700: #861d13;
|
||||
$red-650: #9b2318;
|
||||
$red-600: #af291d;
|
||||
$red-550: #c52f21;
|
||||
$red-500: #d93526;
|
||||
$red-450: #ee402e;
|
||||
$red-400: #f06048;
|
||||
$red-350: #f17961;
|
||||
$red-300: #f38f79;
|
||||
$red-250: #f5a390;
|
||||
$red-200: #f5b7a8;
|
||||
$red-150: #f6cabf;
|
||||
$red-100: #f8dcd6;
|
||||
$red-50: #faeeeb;
|
||||
$red: $red-550;
|
||||
|
||||
// Pink
|
||||
$pink-950: #25060c;
|
||||
$pink-900: #380916;
|
||||
$pink-850: #4b0c1f;
|
||||
$pink-800: #5f0e28;
|
||||
$pink-750: #740f31;
|
||||
$pink-700: #88143b;
|
||||
$pink-650: #9d1945;
|
||||
$pink-600: #b21e4f;
|
||||
$pink-550: #c72259;
|
||||
$pink-500: #d92662;
|
||||
$pink-450: #f42c6f;
|
||||
$pink-400: #f6547e;
|
||||
$pink-350: #f7708e;
|
||||
$pink-300: #f8889e;
|
||||
$pink-250: #f99eae;
|
||||
$pink-200: #f9b4be;
|
||||
$pink-150: #f9c8ce;
|
||||
$pink-100: #f9dbdf;
|
||||
$pink-50: #fbedef;
|
||||
$pink: $pink-500;
|
||||
|
||||
// Fuchsia
|
||||
$fuchsia-950: #230518;
|
||||
$fuchsia-900: #360925;
|
||||
$fuchsia-850: #480b33;
|
||||
$fuchsia-800: #5c0d41;
|
||||
$fuchsia-750: #700e4f;
|
||||
$fuchsia-700: #84135e;
|
||||
$fuchsia-650: #98176d;
|
||||
$fuchsia-600: #ac1c7c;
|
||||
$fuchsia-550: #c1208b;
|
||||
$fuchsia-500: #d9269d;
|
||||
$fuchsia-450: #ed2aac;
|
||||
$fuchsia-400: #f748b7;
|
||||
$fuchsia-350: #f869bf;
|
||||
$fuchsia-300: #f983c7;
|
||||
$fuchsia-250: #fa9acf;
|
||||
$fuchsia-200: #f9b1d8;
|
||||
$fuchsia-150: #f9c6e1;
|
||||
$fuchsia-100: #f9daea;
|
||||
$fuchsia-50: #fbedf4;
|
||||
$fuchsia: $fuchsia-550;
|
||||
|
||||
// Purple
|
||||
$purple-950: #1e0820;
|
||||
$purple-900: #2d0f33;
|
||||
$purple-850: #3d1545;
|
||||
$purple-800: #4d1a57;
|
||||
$purple-750: #5e206b;
|
||||
$purple-700: #6f277d;
|
||||
$purple-650: #802e90;
|
||||
$purple-600: #9236a4;
|
||||
$purple-550: #aa40bf;
|
||||
$purple-500: #b645cd;
|
||||
$purple-450: #c652dc;
|
||||
$purple-400: #cd68e0;
|
||||
$purple-350: #d47de4;
|
||||
$purple-300: #db90e8;
|
||||
$purple-250: #e2a3eb;
|
||||
$purple-200: #e7b6ee;
|
||||
$purple-150: #edc9f1;
|
||||
$purple-100: #f2dcf4;
|
||||
$purple-50: #f8eef9;
|
||||
$purple: $purple-600;
|
||||
|
||||
// Violet
|
||||
$violet-950: #190928;
|
||||
$violet-900: #251140;
|
||||
$violet-850: #321856;
|
||||
$violet-800: #3f1e6d;
|
||||
$violet-750: #4d2585;
|
||||
$violet-700: #5b2d9c;
|
||||
$violet-650: #6935b3;
|
||||
$violet-600: #7540bf;
|
||||
$violet-550: #8352c5;
|
||||
$violet-500: #9062ca;
|
||||
$violet-450: #9b71cf;
|
||||
$violet-400: #a780d4;
|
||||
$violet-350: #b290d9;
|
||||
$violet-300: #bd9fdf;
|
||||
$violet-250: #c9afe4;
|
||||
$violet-200: #d3bfe8;
|
||||
$violet-150: #decfed;
|
||||
$violet-100: #e8dff2;
|
||||
$violet-50: #f3eff7;
|
||||
$violet: $violet-600;
|
||||
|
||||
// Indigo
|
||||
$indigo-950: #110b31;
|
||||
$indigo-900: #181546;
|
||||
$indigo-850: #1f1e5e;
|
||||
$indigo-800: #272678;
|
||||
$indigo-750: #2f2f92;
|
||||
$indigo-700: #3838ab;
|
||||
$indigo-650: #4040bf;
|
||||
$indigo-600: #524ed2;
|
||||
$indigo-550: #655cd6;
|
||||
$indigo-500: #7569da;
|
||||
$indigo-450: #8577dd;
|
||||
$indigo-400: #9486e1;
|
||||
$indigo-350: #a294e5;
|
||||
$indigo-300: #b0a3e8;
|
||||
$indigo-250: #bdb2ec;
|
||||
$indigo-200: #cac1ee;
|
||||
$indigo-150: #d8d0f1;
|
||||
$indigo-100: #e5e0f4;
|
||||
$indigo-50: #f2f0f9;
|
||||
$indigo: $indigo-600;
|
||||
|
||||
// Blue
|
||||
$blue-950: #080f2d;
|
||||
$blue-900: #0c1a41;
|
||||
$blue-850: #0e2358;
|
||||
$blue-800: #0f2d70;
|
||||
$blue-750: #0f3888;
|
||||
$blue-700: #1343a0;
|
||||
$blue-650: #184eb8;
|
||||
$blue-600: #1d59d0;
|
||||
$blue-550: #2060df;
|
||||
$blue-500: #3c71f7;
|
||||
$blue-450: #5c7ef8;
|
||||
$blue-400: #748bf8;
|
||||
$blue-350: #8999f9;
|
||||
$blue-300: #9ca7fa;
|
||||
$blue-250: #aeb5fb;
|
||||
$blue-200: #bfc3fa;
|
||||
$blue-150: #d0d2fa;
|
||||
$blue-100: #e0e1fa;
|
||||
$blue-50: #f0f0fb;
|
||||
$blue: $blue-550;
|
||||
|
||||
// Azure
|
||||
$azure-950: #04121d;
|
||||
$azure-900: #061e2f;
|
||||
$azure-850: #052940;
|
||||
$azure-800: #033452;
|
||||
$azure-750: #014063;
|
||||
$azure-700: #014c75;
|
||||
$azure-650: #015887;
|
||||
$azure-600: #02659a;
|
||||
$azure-550: #0172ad;
|
||||
$azure-500: #017fc0;
|
||||
$azure-450: #018cd4;
|
||||
$azure-400: #029ae8;
|
||||
$azure-350: #01aaff;
|
||||
$azure-300: #51b4ff;
|
||||
$azure-250: #79c0ff;
|
||||
$azure-200: #9bccfd;
|
||||
$azure-150: #b7d9fc;
|
||||
$azure-100: #d1e5fb;
|
||||
$azure-50: #e9f2fc;
|
||||
$azure: $azure-550;
|
||||
|
||||
// Cyan
|
||||
$cyan-950: #041413;
|
||||
$cyan-900: #051f1f;
|
||||
$cyan-850: #052b2b;
|
||||
$cyan-800: #043737;
|
||||
$cyan-750: #014343;
|
||||
$cyan-700: #015050;
|
||||
$cyan-650: #025d5d;
|
||||
$cyan-600: #046a6a;
|
||||
$cyan-550: #047878;
|
||||
$cyan-500: #058686;
|
||||
$cyan-450: #059494;
|
||||
$cyan-400: #05a2a2;
|
||||
$cyan-350: #0ab1b1;
|
||||
$cyan-300: #0ac2c2;
|
||||
$cyan-250: #0ccece;
|
||||
$cyan-200: #25dddd;
|
||||
$cyan-150: #3deceb;
|
||||
$cyan-100: #58faf9;
|
||||
$cyan-50: #c3fcfa;
|
||||
$cyan: $cyan-550;
|
||||
|
||||
// Jade
|
||||
$jade-950: #04140c;
|
||||
$jade-900: #052014;
|
||||
$jade-850: #042c1b;
|
||||
$jade-800: #033823;
|
||||
$jade-750: #00452b;
|
||||
$jade-700: #015234;
|
||||
$jade-650: #005f3d;
|
||||
$jade-600: #006d46;
|
||||
$jade-550: #007a50;
|
||||
$jade-500: #00895a;
|
||||
$jade-450: #029764;
|
||||
$jade-400: #00a66e;
|
||||
$jade-350: #00b478;
|
||||
$jade-300: #00c482;
|
||||
$jade-250: #00cc88;
|
||||
$jade-200: #21e299;
|
||||
$jade-150: #39f1a6;
|
||||
$jade-100: #70fcba;
|
||||
$jade-50: #cbfce1;
|
||||
$jade: $jade-550;
|
||||
|
||||
// Green
|
||||
$green-950: #0b1305;
|
||||
$green-900: #131f07;
|
||||
$green-850: #152b07;
|
||||
$green-800: #173806;
|
||||
$green-750: #1a4405;
|
||||
$green-700: #205107;
|
||||
$green-650: #265e09;
|
||||
$green-600: #2c6c0c;
|
||||
$green-550: #33790f;
|
||||
$green-500: #398712;
|
||||
$green-450: #409614;
|
||||
$green-400: #47a417;
|
||||
$green-350: #4eb31b;
|
||||
$green-300: #55c21e;
|
||||
$green-250: #5dd121;
|
||||
$green-200: #62d926;
|
||||
$green-150: #77ef3d;
|
||||
$green-100: #95fb62;
|
||||
$green-50: #d7fbc1;
|
||||
$green: $green-500;
|
||||
|
||||
// Lime
|
||||
$lime-950: #101203;
|
||||
$lime-900: #191d03;
|
||||
$lime-850: #202902;
|
||||
$lime-800: #273500;
|
||||
$lime-750: #304100;
|
||||
$lime-700: #394d00;
|
||||
$lime-650: #435a00;
|
||||
$lime-600: #4d6600;
|
||||
$lime-550: #577400;
|
||||
$lime-500: #628100;
|
||||
$lime-450: #6c8f00;
|
||||
$lime-400: #779c00;
|
||||
$lime-350: #82ab00;
|
||||
$lime-300: #8eb901;
|
||||
$lime-250: #99c801;
|
||||
$lime-200: #a5d601;
|
||||
$lime-150: #b2e51a;
|
||||
$lime-100: #c1f335;
|
||||
$lime-50: #defc85;
|
||||
$lime: $lime-200;
|
||||
|
||||
// Yellow
|
||||
$yellow-950: #141103;
|
||||
$yellow-900: #1f1c02;
|
||||
$yellow-850: #2b2600;
|
||||
$yellow-800: #363100;
|
||||
$yellow-750: #423c00;
|
||||
$yellow-700: #4e4700;
|
||||
$yellow-650: #5b5300;
|
||||
$yellow-600: #685f00;
|
||||
$yellow-550: #756b00;
|
||||
$yellow-500: #827800;
|
||||
$yellow-450: #908501;
|
||||
$yellow-400: #9e9200;
|
||||
$yellow-350: #ad9f00;
|
||||
$yellow-300: #bbac00;
|
||||
$yellow-250: #caba01;
|
||||
$yellow-200: #d9c800;
|
||||
$yellow-150: #e8d600;
|
||||
$yellow-100: #f2df0d;
|
||||
$yellow-50: #fdf1b4;
|
||||
$yellow: $yellow-100;
|
||||
|
||||
// Amber
|
||||
$amber-950: #161003;
|
||||
$amber-900: #231a03;
|
||||
$amber-850: #312302;
|
||||
$amber-800: #3f2d00;
|
||||
$amber-750: #4d3700;
|
||||
$amber-700: #5b4200;
|
||||
$amber-650: #694d00;
|
||||
$amber-600: #785800;
|
||||
$amber-550: #876400;
|
||||
$amber-500: #977000;
|
||||
$amber-450: #a77c00;
|
||||
$amber-400: #b78800;
|
||||
$amber-350: #c79400;
|
||||
$amber-300: #d8a100;
|
||||
$amber-250: #e8ae01;
|
||||
$amber-200: #ffbf00;
|
||||
$amber-150: #fecc63;
|
||||
$amber-100: #fddea6;
|
||||
$amber-50: #fcefd9;
|
||||
$amber: $amber-200;
|
||||
|
||||
// Pumpkin
|
||||
$pumpkin-950: #180f04;
|
||||
$pumpkin-900: #271805;
|
||||
$pumpkin-850: #372004;
|
||||
$pumpkin-800: #482802;
|
||||
$pumpkin-750: #593100;
|
||||
$pumpkin-700: #693a00;
|
||||
$pumpkin-650: #7a4400;
|
||||
$pumpkin-600: #8b4f00;
|
||||
$pumpkin-550: #9c5900;
|
||||
$pumpkin-500: #ad6400;
|
||||
$pumpkin-450: #bf6e00;
|
||||
$pumpkin-400: #d27a01;
|
||||
$pumpkin-350: #e48500;
|
||||
$pumpkin-300: #ff9500;
|
||||
$pumpkin-250: #ffa23a;
|
||||
$pumpkin-200: #feb670;
|
||||
$pumpkin-150: #fcca9b;
|
||||
$pumpkin-100: #fcdcc1;
|
||||
$pumpkin-50: #fceee3;
|
||||
$pumpkin: $pumpkin-300;
|
||||
|
||||
// Orange
|
||||
$orange-950: #1b0d06;
|
||||
$orange-900: #2d1509;
|
||||
$orange-850: #411a0a;
|
||||
$orange-800: #561e0a;
|
||||
$orange-750: #6b220a;
|
||||
$orange-700: #7f270b;
|
||||
$orange-650: #942d0d;
|
||||
$orange-600: #a83410;
|
||||
$orange-550: #bd3c13;
|
||||
$orange-500: #d24317;
|
||||
$orange-450: #e74b1a;
|
||||
$orange-400: #f45d2c;
|
||||
$orange-350: #f56b3d;
|
||||
$orange-300: #f68e68;
|
||||
$orange-250: #f8a283;
|
||||
$orange-200: #f8b79f;
|
||||
$orange-150: #f8cab9;
|
||||
$orange-100: #f9dcd2;
|
||||
$orange-50: #faeeea;
|
||||
$orange: $orange-500;
|
||||
|
||||
// Sand
|
||||
$sand-950: #111110;
|
||||
$sand-900: #1c1b19;
|
||||
$sand-850: #272622;
|
||||
$sand-800: #32302b;
|
||||
$sand-750: #3d3b35;
|
||||
$sand-700: #49463f;
|
||||
$sand-650: #55524a;
|
||||
$sand-600: #615e55;
|
||||
$sand-550: #6e6a60;
|
||||
$sand-500: #7b776b;
|
||||
$sand-450: #888377;
|
||||
$sand-400: #959082;
|
||||
$sand-350: #a39e8f;
|
||||
$sand-300: #b0ab9b;
|
||||
$sand-250: #beb8a7;
|
||||
$sand-200: #ccc6b4;
|
||||
$sand-150: #dad4c2;
|
||||
$sand-100: #e8e2d2;
|
||||
$sand-50: #f2f0ec;
|
||||
$sand: $sand-200;
|
||||
|
||||
// Grey
|
||||
$grey-950: #111111;
|
||||
$grey-900: #1b1b1b;
|
||||
$grey-850: #262626;
|
||||
$grey-800: #303030;
|
||||
$grey-750: #3b3b3b;
|
||||
$grey-700: #474747;
|
||||
$grey-650: #525252;
|
||||
$grey-600: #5e5e5e;
|
||||
$grey-550: #6a6a6a;
|
||||
$grey-500: #777777;
|
||||
$grey-450: #808080;
|
||||
$grey-400: #919191;
|
||||
$grey-350: #9e9e9e;
|
||||
$grey-300: #ababab;
|
||||
$grey-250: #b9b9b9;
|
||||
$grey-200: #c6c6c6;
|
||||
$grey-150: #d4d4d4;
|
||||
$grey-100: #e2e2e2;
|
||||
$grey-50: #f1f1f1;
|
||||
$grey: $grey-300;
|
||||
|
||||
// Zinc
|
||||
$zinc-950: #0f1114;
|
||||
$zinc-900: #191c20;
|
||||
$zinc-850: #23262c;
|
||||
$zinc-800: #2d3138;
|
||||
$zinc-750: #373c44;
|
||||
$zinc-700: #424751;
|
||||
$zinc-650: #4d535e;
|
||||
$zinc-600: #5c6370;
|
||||
$zinc-550: #646b79;
|
||||
$zinc-500: #6f7887;
|
||||
$zinc-450: #7b8495;
|
||||
$zinc-400: #8891a4;
|
||||
$zinc-350: #969eaf;
|
||||
$zinc-300: #a4acba;
|
||||
$zinc-250: #b3b9c5;
|
||||
$zinc-200: #c2c7d0;
|
||||
$zinc-150: #d1d5db;
|
||||
$zinc-100: #e0e3e7;
|
||||
$zinc-50: #f0f1f3;
|
||||
$zinc: $zinc-550;
|
||||
|
||||
// Slate
|
||||
$slate-950: #0e1118;
|
||||
$slate-900: #181c25;
|
||||
$slate-850: #202632;
|
||||
$slate-800: #2a3140;
|
||||
$slate-750: #333c4e;
|
||||
$slate-700: #3d475c;
|
||||
$slate-650: #48536b;
|
||||
$slate-600: #525f7a;
|
||||
$slate-550: #5d6b89;
|
||||
$slate-500: #687899;
|
||||
$slate-450: #7385a9;
|
||||
$slate-400: #8191b5;
|
||||
$slate-350: #909ebe;
|
||||
$slate-300: #a0acc7;
|
||||
$slate-250: #b0b9d0;
|
||||
$slate-200: #bfc7d9;
|
||||
$slate-150: #cfd5e2;
|
||||
$slate-100: #dfe3eb;
|
||||
$slate-50: #eff1f4;
|
||||
$slate: $slate-600;
|
||||
|
||||
$colors: (
|
||||
red: (
|
||||
950: $red-950,
|
||||
900: $red-900,
|
||||
850: $red-850,
|
||||
800: $red-800,
|
||||
750: $red-750,
|
||||
700: $red-700,
|
||||
650: $red-650,
|
||||
600: $red-600,
|
||||
550: $red-550,
|
||||
500: $red-500,
|
||||
450: $red-450,
|
||||
400: $red-400,
|
||||
350: $red-350,
|
||||
300: $red-300,
|
||||
250: $red-250,
|
||||
200: $red-200,
|
||||
150: $red-150,
|
||||
100: $red-100,
|
||||
50: $red-50,
|
||||
main: $red,
|
||||
),
|
||||
pink: (
|
||||
950: $pink-950,
|
||||
900: $pink-900,
|
||||
850: $pink-850,
|
||||
800: $pink-800,
|
||||
750: $pink-750,
|
||||
700: $pink-700,
|
||||
650: $pink-650,
|
||||
600: $pink-600,
|
||||
550: $pink-550,
|
||||
500: $pink-500,
|
||||
450: $pink-450,
|
||||
400: $pink-400,
|
||||
350: $pink-350,
|
||||
300: $pink-300,
|
||||
250: $pink-250,
|
||||
200: $pink-200,
|
||||
150: $pink-150,
|
||||
100: $pink-100,
|
||||
50: $pink-50,
|
||||
main: $pink,
|
||||
),
|
||||
fuchsia: (
|
||||
950: $fuchsia-950,
|
||||
900: $fuchsia-900,
|
||||
850: $fuchsia-850,
|
||||
800: $fuchsia-800,
|
||||
750: $fuchsia-750,
|
||||
700: $fuchsia-700,
|
||||
650: $fuchsia-650,
|
||||
600: $fuchsia-600,
|
||||
550: $fuchsia-550,
|
||||
500: $fuchsia-500,
|
||||
450: $fuchsia-450,
|
||||
400: $fuchsia-400,
|
||||
350: $fuchsia-350,
|
||||
300: $fuchsia-300,
|
||||
250: $fuchsia-250,
|
||||
200: $fuchsia-200,
|
||||
150: $fuchsia-150,
|
||||
100: $fuchsia-100,
|
||||
50: $fuchsia-50,
|
||||
main: $fuchsia,
|
||||
),
|
||||
purple: (
|
||||
950: $purple-950,
|
||||
900: $purple-900,
|
||||
850: $purple-850,
|
||||
800: $purple-800,
|
||||
750: $purple-750,
|
||||
700: $purple-700,
|
||||
650: $purple-650,
|
||||
600: $purple-600,
|
||||
550: $purple-550,
|
||||
500: $purple-500,
|
||||
450: $purple-450,
|
||||
400: $purple-400,
|
||||
350: $purple-350,
|
||||
300: $purple-300,
|
||||
250: $purple-250,
|
||||
200: $purple-200,
|
||||
150: $purple-150,
|
||||
100: $purple-100,
|
||||
50: $purple-50,
|
||||
main: $purple,
|
||||
),
|
||||
violet: (
|
||||
950: $violet-950,
|
||||
900: $violet-900,
|
||||
850: $violet-850,
|
||||
800: $violet-800,
|
||||
750: $violet-750,
|
||||
700: $violet-700,
|
||||
650: $violet-650,
|
||||
600: $violet-600,
|
||||
550: $violet-550,
|
||||
500: $violet-500,
|
||||
450: $violet-450,
|
||||
400: $violet-400,
|
||||
350: $violet-350,
|
||||
300: $violet-300,
|
||||
250: $violet-250,
|
||||
200: $violet-200,
|
||||
150: $violet-150,
|
||||
100: $violet-100,
|
||||
50: $violet-50,
|
||||
main: $violet,
|
||||
),
|
||||
indigo: (
|
||||
950: $indigo-950,
|
||||
900: $indigo-900,
|
||||
850: $indigo-850,
|
||||
800: $indigo-800,
|
||||
750: $indigo-750,
|
||||
700: $indigo-700,
|
||||
650: $indigo-650,
|
||||
600: $indigo-600,
|
||||
550: $indigo-550,
|
||||
500: $indigo-500,
|
||||
450: $indigo-450,
|
||||
400: $indigo-400,
|
||||
350: $indigo-350,
|
||||
300: $indigo-300,
|
||||
250: $indigo-250,
|
||||
200: $indigo-200,
|
||||
150: $indigo-150,
|
||||
100: $indigo-100,
|
||||
50: $indigo-50,
|
||||
main: $indigo,
|
||||
),
|
||||
blue: (
|
||||
950: $blue-950,
|
||||
900: $blue-900,
|
||||
850: $blue-850,
|
||||
800: $blue-800,
|
||||
750: $blue-750,
|
||||
700: $blue-700,
|
||||
650: $blue-650,
|
||||
600: $blue-600,
|
||||
550: $blue-550,
|
||||
500: $blue-500,
|
||||
450: $blue-450,
|
||||
400: $blue-400,
|
||||
350: $blue-350,
|
||||
300: $blue-300,
|
||||
250: $blue-250,
|
||||
200: $blue-200,
|
||||
150: $blue-150,
|
||||
100: $blue-100,
|
||||
50: $blue-50,
|
||||
main: $blue,
|
||||
),
|
||||
azure: (
|
||||
950: $azure-950,
|
||||
900: $azure-900,
|
||||
850: $azure-850,
|
||||
800: $azure-800,
|
||||
750: $azure-750,
|
||||
700: $azure-700,
|
||||
650: $azure-650,
|
||||
600: $azure-600,
|
||||
550: $azure-550,
|
||||
500: $azure-500,
|
||||
450: $azure-450,
|
||||
400: $azure-400,
|
||||
350: $azure-350,
|
||||
300: $azure-300,
|
||||
250: $azure-250,
|
||||
200: $azure-200,
|
||||
150: $azure-150,
|
||||
100: $azure-100,
|
||||
50: $azure-50,
|
||||
main: $azure,
|
||||
),
|
||||
cyan: (
|
||||
950: $cyan-950,
|
||||
900: $cyan-900,
|
||||
850: $cyan-850,
|
||||
800: $cyan-800,
|
||||
750: $cyan-750,
|
||||
700: $cyan-700,
|
||||
650: $cyan-650,
|
||||
600: $cyan-600,
|
||||
550: $cyan-550,
|
||||
500: $cyan-500,
|
||||
450: $cyan-450,
|
||||
400: $cyan-400,
|
||||
350: $cyan-350,
|
||||
300: $cyan-300,
|
||||
250: $cyan-250,
|
||||
200: $cyan-200,
|
||||
150: $cyan-150,
|
||||
100: $cyan-100,
|
||||
50: $cyan-50,
|
||||
main: $cyan,
|
||||
),
|
||||
jade: (
|
||||
950: $jade-950,
|
||||
900: $jade-900,
|
||||
850: $jade-850,
|
||||
800: $jade-800,
|
||||
750: $jade-750,
|
||||
700: $jade-700,
|
||||
650: $jade-650,
|
||||
600: $jade-600,
|
||||
550: $jade-550,
|
||||
500: $jade-500,
|
||||
450: $jade-450,
|
||||
400: $jade-400,
|
||||
350: $jade-350,
|
||||
300: $jade-300,
|
||||
250: $jade-250,
|
||||
200: $jade-200,
|
||||
150: $jade-150,
|
||||
100: $jade-100,
|
||||
50: $jade-50,
|
||||
main: $jade,
|
||||
),
|
||||
green: (
|
||||
950: $green-950,
|
||||
900: $green-900,
|
||||
850: $green-850,
|
||||
800: $green-800,
|
||||
750: $green-750,
|
||||
700: $green-700,
|
||||
650: $green-650,
|
||||
600: $green-600,
|
||||
550: $green-550,
|
||||
500: $green-500,
|
||||
450: $green-450,
|
||||
400: $green-400,
|
||||
350: $green-350,
|
||||
300: $green-300,
|
||||
250: $green-250,
|
||||
200: $green-200,
|
||||
150: $green-150,
|
||||
100: $green-100,
|
||||
50: $green-50,
|
||||
main: $green,
|
||||
),
|
||||
lime: (
|
||||
950: $lime-950,
|
||||
900: $lime-900,
|
||||
850: $lime-850,
|
||||
800: $lime-800,
|
||||
750: $lime-750,
|
||||
700: $lime-700,
|
||||
650: $lime-650,
|
||||
600: $lime-600,
|
||||
550: $lime-550,
|
||||
500: $lime-500,
|
||||
450: $lime-450,
|
||||
400: $lime-400,
|
||||
350: $lime-350,
|
||||
300: $lime-300,
|
||||
250: $lime-250,
|
||||
200: $lime-200,
|
||||
150: $lime-150,
|
||||
100: $lime-100,
|
||||
50: $lime-50,
|
||||
main: $lime,
|
||||
),
|
||||
yellow: (
|
||||
950: $yellow-950,
|
||||
900: $yellow-900,
|
||||
850: $yellow-850,
|
||||
800: $yellow-800,
|
||||
750: $yellow-750,
|
||||
700: $yellow-700,
|
||||
650: $yellow-650,
|
||||
600: $yellow-600,
|
||||
550: $yellow-550,
|
||||
500: $yellow-500,
|
||||
450: $yellow-450,
|
||||
400: $yellow-400,
|
||||
350: $yellow-350,
|
||||
300: $yellow-300,
|
||||
250: $yellow-250,
|
||||
200: $yellow-200,
|
||||
150: $yellow-150,
|
||||
100: $yellow-100,
|
||||
50: $yellow-50,
|
||||
main: $yellow,
|
||||
),
|
||||
amber: (
|
||||
950: $amber-950,
|
||||
900: $amber-900,
|
||||
850: $amber-850,
|
||||
800: $amber-800,
|
||||
750: $amber-750,
|
||||
700: $amber-700,
|
||||
650: $amber-650,
|
||||
600: $amber-600,
|
||||
550: $amber-550,
|
||||
500: $amber-500,
|
||||
450: $amber-450,
|
||||
400: $amber-400,
|
||||
350: $amber-350,
|
||||
300: $amber-300,
|
||||
250: $amber-250,
|
||||
200: $amber-200,
|
||||
150: $amber-150,
|
||||
100: $amber-100,
|
||||
50: $amber-50,
|
||||
main: $amber,
|
||||
),
|
||||
pumpkin: (
|
||||
950: $pumpkin-950,
|
||||
900: $pumpkin-900,
|
||||
850: $pumpkin-850,
|
||||
800: $pumpkin-800,
|
||||
750: $pumpkin-750,
|
||||
700: $pumpkin-700,
|
||||
650: $pumpkin-650,
|
||||
600: $pumpkin-600,
|
||||
550: $pumpkin-550,
|
||||
500: $pumpkin-500,
|
||||
450: $pumpkin-450,
|
||||
400: $pumpkin-400,
|
||||
350: $pumpkin-350,
|
||||
300: $pumpkin-300,
|
||||
250: $pumpkin-250,
|
||||
200: $pumpkin-200,
|
||||
150: $pumpkin-150,
|
||||
100: $pumpkin-100,
|
||||
50: $pumpkin-50,
|
||||
main: $pumpkin,
|
||||
),
|
||||
orange: (
|
||||
950: $orange-950,
|
||||
900: $orange-900,
|
||||
850: $orange-850,
|
||||
800: $orange-800,
|
||||
750: $orange-750,
|
||||
700: $orange-700,
|
||||
650: $orange-650,
|
||||
600: $orange-600,
|
||||
550: $orange-550,
|
||||
500: $orange-500,
|
||||
450: $orange-450,
|
||||
400: $orange-400,
|
||||
350: $orange-350,
|
||||
300: $orange-300,
|
||||
250: $orange-250,
|
||||
200: $orange-200,
|
||||
150: $orange-150,
|
||||
100: $orange-100,
|
||||
50: $orange-50,
|
||||
main: $orange,
|
||||
),
|
||||
sand: (
|
||||
950: $sand-950,
|
||||
900: $sand-900,
|
||||
850: $sand-850,
|
||||
800: $sand-800,
|
||||
750: $sand-750,
|
||||
700: $sand-700,
|
||||
650: $sand-650,
|
||||
600: $sand-600,
|
||||
550: $sand-550,
|
||||
500: $sand-500,
|
||||
450: $sand-450,
|
||||
400: $sand-400,
|
||||
350: $sand-350,
|
||||
300: $sand-300,
|
||||
250: $sand-250,
|
||||
200: $sand-200,
|
||||
150: $sand-150,
|
||||
100: $sand-100,
|
||||
50: $sand-50,
|
||||
main: $sand,
|
||||
),
|
||||
grey: (
|
||||
950: $grey-950,
|
||||
900: $grey-900,
|
||||
850: $grey-850,
|
||||
800: $grey-800,
|
||||
750: $grey-750,
|
||||
700: $grey-700,
|
||||
650: $grey-650,
|
||||
600: $grey-600,
|
||||
550: $grey-550,
|
||||
500: $grey-500,
|
||||
450: $grey-450,
|
||||
400: $grey-400,
|
||||
350: $grey-350,
|
||||
300: $grey-300,
|
||||
250: $grey-250,
|
||||
200: $grey-200,
|
||||
150: $grey-150,
|
||||
100: $grey-100,
|
||||
50: $grey-50,
|
||||
main: $grey,
|
||||
),
|
||||
zinc: (
|
||||
950: $zinc-950,
|
||||
900: $zinc-900,
|
||||
850: $zinc-850,
|
||||
800: $zinc-800,
|
||||
750: $zinc-750,
|
||||
700: $zinc-700,
|
||||
650: $zinc-650,
|
||||
600: $zinc-600,
|
||||
550: $zinc-550,
|
||||
500: $zinc-500,
|
||||
450: $zinc-450,
|
||||
400: $zinc-400,
|
||||
350: $zinc-350,
|
||||
300: $zinc-300,
|
||||
250: $zinc-250,
|
||||
200: $zinc-200,
|
||||
150: $zinc-150,
|
||||
100: $zinc-100,
|
||||
50: $zinc-50,
|
||||
main: $zinc,
|
||||
),
|
||||
slate: (
|
||||
950: $slate-950,
|
||||
900: $slate-900,
|
||||
850: $slate-850,
|
||||
800: $slate-800,
|
||||
750: $slate-750,
|
||||
700: $slate-700,
|
||||
650: $slate-650,
|
||||
600: $slate-600,
|
||||
550: $slate-550,
|
||||
500: $slate-500,
|
||||
450: $slate-450,
|
||||
400: $slate-400,
|
||||
350: $slate-350,
|
||||
300: $slate-300,
|
||||
250: $slate-250,
|
||||
200: $slate-200,
|
||||
150: $slate-150,
|
||||
100: $slate-100,
|
||||
50: $slate-50,
|
||||
main: $slate,
|
||||
),
|
||||
);
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "../../colors";
|
||||
@use "settings";
|
||||
@use "utils";
|
||||
|
||||
$enable-css-vars: map.get(settings.$utilities, "css-vars");
|
||||
$background-color-property-name: map.get(settings.$properties, "background-color");
|
||||
$color-property-name: map.get(settings.$properties, "color");
|
||||
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
||||
|
||||
@mixin foreground-color($background-color) {
|
||||
@if map.get(settings.$utilities, "color-for-background-colors") {
|
||||
@if utils.foreground-brightness($background-color) == "light" {
|
||||
@if $enable-css-vars {
|
||||
color: var(#{$css-var-color-prefix}-light);
|
||||
} @else {
|
||||
color: utils.display-color(map.get(settings.$palette, "light-color"));
|
||||
}
|
||||
} @else {
|
||||
@if $enable-css-vars {
|
||||
color: var(#{$css-var-color-prefix}-dark);
|
||||
} @else {
|
||||
color: utils.display-color(map.get(settings.$palette, "dark-color"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-colors {
|
||||
@if map.get(settings.$utilities, "background-colors") {
|
||||
// Loop through color families
|
||||
@each $family, $colors in colors.$colors {
|
||||
@if list.index(map.get(settings.$palette, "color-families"), $family) {
|
||||
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
|
||||
$class-family-name: #{$background-color-property-name}-#{$family};
|
||||
|
||||
// Loop through colors
|
||||
@each $shade, $color-value in $colors {
|
||||
// Main color
|
||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||
$value: $color-value;
|
||||
@if $enable-css-vars {
|
||||
$value: var(#{$css-var-family-name});
|
||||
} @else {
|
||||
$value: utils.display-color($color-value);
|
||||
}
|
||||
.#{settings.$css-class-prefix}#{$class-family-name} {
|
||||
background-color: $value;
|
||||
@include foreground-color($color-value);
|
||||
}
|
||||
}
|
||||
|
||||
// Shades
|
||||
@else if
|
||||
list.index(map.get(settings.$palette, "shades"), $shade) and
|
||||
map.get(settings.$palette, "enable-shades")
|
||||
{
|
||||
$value: $color-value;
|
||||
@if $enable-css-vars {
|
||||
$value: var(#{$css-var-family-name}-#{$shade});
|
||||
} @else {
|
||||
$value: utils.display-color($color-value);
|
||||
}
|
||||
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
|
||||
background-color: $value;
|
||||
@include foreground-color($color-value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "../../colors";
|
||||
@use "settings";
|
||||
@use "utils";
|
||||
|
||||
@mixin colors {
|
||||
@if map.get(settings.$utilities, "colors") {
|
||||
$enable-css-vars: map.get(settings.$utilities, "css-vars");
|
||||
$color-property-name: map.get(settings.$properties, "color");
|
||||
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
||||
|
||||
// Loop through color families
|
||||
@each $family, $colors in colors.$colors {
|
||||
@if list.index(map.get(settings.$palette, "color-families"), $family) {
|
||||
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
|
||||
$class-family-name: #{$color-property-name}-#{$family};
|
||||
|
||||
// Loop through colors
|
||||
@each $shade, $color-value in $colors {
|
||||
// Main color
|
||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||
@if $enable-css-vars {
|
||||
$color-value: var(#{$css-var-family-name});
|
||||
} @else {
|
||||
$color-value: utils.display-color($color-value);
|
||||
}
|
||||
.#{settings.$css-class-prefix}#{$class-family-name} {
|
||||
color: $color-value;
|
||||
}
|
||||
}
|
||||
|
||||
// Shades
|
||||
@else if
|
||||
list.index(map.get(settings.$palette, "shades"), $shade) and
|
||||
map.get(settings.$palette, "enable-shades")
|
||||
{
|
||||
@if $enable-css-vars {
|
||||
$color-value: var(#{$css-var-family-name}-#{$shade});
|
||||
} @else {
|
||||
$color-value: utils.display-color($color-value);
|
||||
}
|
||||
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
|
||||
color: $color-value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "../../colors";
|
||||
@use "settings";
|
||||
@use "utils";
|
||||
|
||||
@mixin css-vars {
|
||||
$enable-css-vars: map.get(settings.$utilities, "css-vars");
|
||||
$color-property-name: map.get(settings.$properties, "color");
|
||||
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
|
||||
|
||||
@if $enable-css-vars {
|
||||
:root,
|
||||
:host {
|
||||
// Loop through color families
|
||||
@each $family, $colors in colors.$colors {
|
||||
@if list.index(map.get(settings.$palette, "color-families"), $family) {
|
||||
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
|
||||
|
||||
// Loop through colors
|
||||
@each $shade, $color-value in $colors {
|
||||
// Main color
|
||||
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
|
||||
#{$css-var-family-name}: #{utils.display-color($color-value)};
|
||||
}
|
||||
|
||||
// Shades
|
||||
@else if
|
||||
list.index(map.get(settings.$palette, "shades"), $shade) and
|
||||
map.get(settings.$palette, "enable-shades")
|
||||
{
|
||||
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Black & white
|
||||
@if map.get(settings.$palette, "enable-black-and-white") {
|
||||
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
|
||||
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
|
||||
}
|
||||
|
||||
// Text color variables
|
||||
@if map.get(settings.$utilities, "color-for-background-colors") {
|
||||
#{$css-var-color-prefix}-light: #{utils.display-color(
|
||||
map.get(settings.$palette, "light-color")
|
||||
)};
|
||||
#{$css-var-color-prefix}-dark: #{utils.display-color(
|
||||
map.get(settings.$palette, "dark-color")
|
||||
)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@forward "settings";
|
||||
@use "css-vars" as *;
|
||||
@use "colors" as *;
|
||||
@use "background-colors" as *;
|
||||
|
||||
@include css-vars;
|
||||
@include colors;
|
||||
@include background-colors;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../../settings" as pico-settings;
|
||||
|
||||
// Prefix for CSS variables
|
||||
$css-var-prefix: "--pico-" !default; // Must start with "--"
|
||||
$css-class-prefix: "pico-" !default;
|
||||
|
||||
// Palette
|
||||
$palette: () !default;
|
||||
$palette: map.merge(
|
||||
(
|
||||
// Color families
|
||||
"color-families": (
|
||||
red,
|
||||
pink,
|
||||
fuchsia,
|
||||
purple,
|
||||
violet,
|
||||
indigo,
|
||||
blue,
|
||||
azure,
|
||||
cyan,
|
||||
jade,
|
||||
green,
|
||||
lime,
|
||||
yellow,
|
||||
amber,
|
||||
pumpkin,
|
||||
orange,
|
||||
sand,
|
||||
grey,
|
||||
zinc,
|
||||
slate
|
||||
),
|
||||
// Shades
|
||||
"shades": (
|
||||
50,
|
||||
100,
|
||||
150,
|
||||
200,
|
||||
250,
|
||||
300,
|
||||
350,
|
||||
400,
|
||||
450,
|
||||
500,
|
||||
550,
|
||||
600,
|
||||
650,
|
||||
700,
|
||||
750,
|
||||
800,
|
||||
850,
|
||||
900,
|
||||
950
|
||||
),
|
||||
// Export main color for each family
|
||||
"enable-main-color": true,
|
||||
|
||||
// Export shades for each family
|
||||
"enable-shades": true,
|
||||
|
||||
// Export black and white
|
||||
"enable-black-and-white": false,
|
||||
|
||||
// Light color used for dark backgrounds
|
||||
"light-color": #fff,
|
||||
|
||||
// Dark color used for light backgrounds
|
||||
"dark-color": #000,
|
||||
|
||||
// Export as HEX, RGB or HSL values
|
||||
"export-as": "hex" // hex | rgb | hsl
|
||||
),
|
||||
$palette
|
||||
);
|
||||
|
||||
// Properties names used for CSS variables and classes
|
||||
// Useful if you want to shorten the names
|
||||
$properties: () !default;
|
||||
$properties: map.merge(
|
||||
(
|
||||
"color": "color",
|
||||
"background-color": "background",
|
||||
),
|
||||
$properties
|
||||
);
|
||||
|
||||
// Utilities to export
|
||||
$utilities: () !default;
|
||||
$utilities: map.merge(
|
||||
(
|
||||
// CSS Vars
|
||||
"css-vars": true,
|
||||
|
||||
// Colors utility classes
|
||||
"colors": true,
|
||||
|
||||
// Background color utility classes
|
||||
"background-colors": true,
|
||||
|
||||
// Color value for background color utility classes
|
||||
"color-for-background-colors": true
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
@use "settings";
|
||||
|
||||
// Determines if the foreground needs to be light or dark
|
||||
// depending on the background color passed.
|
||||
// W3C reference: http://www.w3.org/TR/AERT#color-contrast
|
||||
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
|
||||
@function foreground-brightness($background-color) {
|
||||
$background-color-brightness: brightness($background-color);
|
||||
$light-color-brightness: brightness(#ffffff);
|
||||
|
||||
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
|
||||
@return "light";
|
||||
} @else {
|
||||
@return "dark";
|
||||
}
|
||||
}
|
||||
|
||||
// Calculates the color brightness
|
||||
// Color brightness is determined by the following formula:
|
||||
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
|
||||
@function brightness($color) {
|
||||
$color-brightness: round(
|
||||
math.div(
|
||||
(color.channel($color, "red") * 299) + (color.channel($color, "green") * 587) +
|
||||
(color.channel($color, "blue") * 114),
|
||||
1000
|
||||
)
|
||||
);
|
||||
|
||||
@return $color-brightness;
|
||||
}
|
||||
|
||||
// Returns the color as RGB, HSL or HEX
|
||||
@function display-color($color) {
|
||||
@if map.get(settings.$palette, "export-as") == "rgb" {
|
||||
@return display-rgb($color);
|
||||
}
|
||||
@if map.get(settings.$palette, "export-as") == "hsl" {
|
||||
@return display-hsl($color);
|
||||
}
|
||||
@return $color;
|
||||
}
|
||||
|
||||
// Display color as HSL
|
||||
@function display-hsl($color) {
|
||||
@return unquote(
|
||||
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
|
||||
);
|
||||
}
|
||||
|
||||
// Display color as RGB
|
||||
@function display-rgb($color) {
|
||||
@return unquote(
|
||||
"rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
|
||||
color.channel($color, "blue") + ")"
|
||||
);
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/accordion") {
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
*/
|
||||
|
||||
#{$parent-selector} details {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:not([role]) {
|
||||
color: var(#{$css-var-prefix}accordion-close-summary-color);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-moz-list-bullet {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
// Marker
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(#{$css-var-prefix}accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:not([role]) {
|
||||
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
|
||||
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
|
||||
color: var(#{$css-var-prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Type button
|
||||
&[role="button"] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(#{$css-var-prefix}accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
float: left;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/card") {
|
||||
/**
|
||||
* Card (<article>)
|
||||
*/
|
||||
|
||||
#{$parent-selector} article {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}card-background-color);
|
||||
box-shadow: var(#{$css-var-prefix}card-box-shadow);
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
|
||||
}
|
||||
|
||||
> header {
|
||||
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}card-border-color);
|
||||
border-top-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-top-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
}
|
||||
|
||||
> footer {
|
||||
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}card-border-color);
|
||||
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
|
||||
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
/**
|
||||
* Dropdown (details.dropdown)
|
||||
*/
|
||||
|
||||
// Container
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
|
||||
// Marker
|
||||
// ––––––––––––––––––––
|
||||
> summary,
|
||||
> button,
|
||||
> a {
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
|
||||
margin-inline-start: 0.25rem;
|
||||
float: right;
|
||||
// TODO: find out why we need this magic number (0.2 rem)
|
||||
// for the marker to be aligned with the regular select
|
||||
transform: rotate(0deg) translateX(0.2rem);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Container type accordion
|
||||
// inside a nav
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} nav details.dropdown {
|
||||
// Override height
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Button as a select
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown > summary:not([role]) {
|
||||
height: calc(
|
||||
1rem *
|
||||
var(#{$css-var-prefix}line-height) +
|
||||
var(#{$css-var-prefix}form-element-spacing-vertical) *
|
||||
2 +
|
||||
var(#{$css-var-prefix}border-width) *
|
||||
2
|
||||
);
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
border: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}form-element-border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}form-element-background-color);
|
||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
||||
background-color: var(#{$css-var-prefix}form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-focus-color);
|
||||
}
|
||||
|
||||
// Reset focus visible from accordion component
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
&[aria-invalid="false"] {
|
||||
#{$css-var-prefix}form-element-border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-border-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-active-border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-focus-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-focus-color: var(
|
||||
#{$css-var-prefix}form-element-valid-focus-color
|
||||
);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
#{$css-var-prefix}form-element-border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-border-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-active-border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-focus-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-focus-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-focus-color
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown inside a nav
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
> summary {
|
||||
&::after {
|
||||
transform: rotate(0deg) translateX(0rem);
|
||||
}
|
||||
|
||||
&:not([role]) {
|
||||
// Override height
|
||||
height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
|
||||
);
|
||||
padding: calc(
|
||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Submenu
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown > summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
margin: 0;
|
||||
margin-top: var(#{$css-var-prefix}outline-width);
|
||||
padding: 0;
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}dropdown-background-color);
|
||||
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
|
||||
color: var(#{$css-var-prefix}dropdown-color);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
opacity var(#{$css-var-prefix}transition),
|
||||
transform 0s ease-in-out 1s;
|
||||
}
|
||||
|
||||
&[dir="rtl"] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
|
||||
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
color: var(#{$css-var-prefix}dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-visible,
|
||||
&[aria-current]:not([aria-current="false"]) {
|
||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
||||
&:has(label):hover {
|
||||
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button opened
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Menu opened
|
||||
// ––––––––––––––––––––
|
||||
// 1. Inside container type accordion
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
+ ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
opacity var(#{$css-var-prefix}transition),
|
||||
transform 0s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close for dropdown
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} details.dropdown[open] > summary {
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
inset: 0;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
// Label
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} label > details.dropdown {
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/group") {
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
vertical-align: middle;
|
||||
transition: box-shadow var(#{$css-var-prefix}transition);
|
||||
|
||||
> *,
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"],
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select {
|
||||
&:not(:first-child) {
|
||||
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@supports selector(:has(*)) {
|
||||
// Group box shadow when a button is focused
|
||||
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-button
|
||||
);
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Group box shadow when an input is focused
|
||||
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
||||
#{$css-var-prefix}group-box-shadow: var(
|
||||
#{$css-var-prefix}group-box-shadow-focus-with-input
|
||||
);
|
||||
|
||||
// Adapt box shadow for buttons
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
|
||||
var(#{$css-var-prefix}primary-hover-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove button box shadow if we have a group box shadow
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[role="button"] {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [role="search"] {
|
||||
> * {
|
||||
&:first-child {
|
||||
border-top-left-radius: 5rem;
|
||||
border-bottom-left-radius: 5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 5rem;
|
||||
border-bottom-right-radius: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/loading") {
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
||||
// Everything except form elements
|
||||
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-image: var(#{$css-var-prefix}icon-loading);
|
||||
background-size: 1em auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
vertical-align: -0.125em; // Visual alignment
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons and links
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [role="button"],
|
||||
#{$parent-selector} a {
|
||||
&[aria-busy="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/modal") {
|
||||
/**
|
||||
* Modal (<dialog>)
|
||||
*/
|
||||
|
||||
:root,
|
||||
:host {
|
||||
#{$css-var-prefix}scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
#{$parent-selector} dialog {
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: inherit;
|
||||
min-width: 100%;
|
||||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
|
||||
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
|
||||
// Content
|
||||
> article {
|
||||
$close-selector: if(
|
||||
$enable-classes,
|
||||
".close, :is(a, button)[rel=prev]",
|
||||
":is(a, button)[rel=prev]"
|
||||
);
|
||||
width: 100%;
|
||||
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
|
||||
margin: var(#{$css-var-prefix}spacing);
|
||||
overflow: auto;
|
||||
|
||||
@if map.get($breakpoints, "sm") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
|
||||
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
|
||||
}
|
||||
}
|
||||
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
max-width: map.get(map.get($breakpoints, "md"), "viewport");
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#{$close-selector} {
|
||||
margin: 0;
|
||||
margin-left: var(#{$css-var-prefix}spacing);
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
> footer {
|
||||
text-align: right;
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close icon
|
||||
#{$close-selector} {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background-image: var(#{$css-var-prefix}icon-close);
|
||||
background-position: center;
|
||||
background-size: auto 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: opacity var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Closed state
|
||||
&:not([open]),
|
||||
&[open="false"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@if $enable-classes {
|
||||
.modal-is-open {
|
||||
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
dialog {
|
||||
pointer-events: auto;
|
||||
touch-action: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@if $enable-classes and $enable-transitions {
|
||||
$animation-duration: 0.2s;
|
||||
|
||||
:where(.modal-is-opening, .modal-is-closing) {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-duration: $animation-duration;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
dialog {
|
||||
animation-duration: ($animation-duration * 4);
|
||||
animation-name: modal-overlay;
|
||||
|
||||
> article {
|
||||
animation-delay: $animation-duration;
|
||||
animation-name: modal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-is-closing {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-delay: 0s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-overlay {
|
||||
from {
|
||||
backdrop-filter: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/nav") {
|
||||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
||||
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "\200B";
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} nav,
|
||||
#{$parent-selector} nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#{$parent-selector} nav {
|
||||
justify-content: space-between;
|
||||
overflow: visible;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
||||
|
||||
:where(a, [role="link"]) {
|
||||
display: inline-block;
|
||||
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
|
||||
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal support for buttons and forms elements
|
||||
button,
|
||||
[role="button"],
|
||||
[type="button"],
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
select {
|
||||
height: auto;
|
||||
margin-right: inherit;
|
||||
margin-bottom: 0;
|
||||
margin-left: inherit;
|
||||
padding: calc(
|
||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
)
|
||||
var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
&[aria-label="breadcrumb"] {
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
& ul li {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
a {
|
||||
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
|
||||
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
|
||||
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
|
||||
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal support for aria-current
|
||||
& a[aria-current]:not([aria-current="false"]) {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Nav
|
||||
#{$parent-selector} aside {
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Minimal support for links as buttons
|
||||
[role="button"] {
|
||||
margin: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb RTL
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} nav {
|
||||
&[aria-label="breadcrumb"] {
|
||||
& ul li {
|
||||
&:not(:last-child) {
|
||||
::after {
|
||||
content: "\\";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/progress") {
|
||||
/**
|
||||
* Progress
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
#{$parent-selector} progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} progress {
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
// Styles
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(#{$css-var-prefix}progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: none;
|
||||
}
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(#{$css-var-prefix}progress-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: inline-size var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(#{$css-var-prefix}progress-color);
|
||||
}
|
||||
|
||||
// Indeterminate state
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(#{$css-var-prefix}progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(#{$css-var-prefix}progress-color) 30%,
|
||||
var(#{$css-var-prefix}progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
#{$parent-selector} progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,215 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/tooltip") {
|
||||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
||||
#{$parent-selector} [data-tooltip] {
|
||||
position: relative;
|
||||
|
||||
&:not(a, button, input, [role="button"]) {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&[data-placement="top"]::before,
|
||||
&[data-placement="top"]::after,
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(#{$css-var-prefix}tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Caret
|
||||
&[data-placement="top"]::after,
|
||||
&::after {
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0rem);
|
||||
border-top: 0.3rem solid;
|
||||
border-right: 0.3rem solid transparent;
|
||||
border-left: 0.3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
color: var(#{$css-var-prefix}tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
transform: translate(-50%, 0.25rem);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translate(-50%, -0.3rem);
|
||||
border: 0.3rem solid transparent;
|
||||
border-bottom: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="left"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate(-0.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translate(0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-left: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="right"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 100%;
|
||||
transform: translate(0.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-right: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Display
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
// Animations, excluding touch devices
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
// Default (top)
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
|
||||
transform: translate(-50%, 0.75rem);
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-name: tooltip-slide;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom
|
||||
&[data-placement="bottom"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
||||
transform: translate(-50%, -0.5rem);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left
|
||||
&[data-placement="left"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
|
||||
transform: translate(0.05rem, -50%);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right
|
||||
&[data-placement="right"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
animation-name: tooltip-slide;
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
||||
transform: translate(-0.05rem, -50%);
|
||||
animation-name: tooltip-caret-slide;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide {
|
||||
to {
|
||||
transform: var(#{$css-var-prefix}tooltip-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/button") {
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
#{$parent-selector} button {
|
||||
margin: 0; // 2
|
||||
overflow: visible; // 3
|
||||
font-family: inherit; // 1
|
||||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button,
|
||||
#{$parent-selector} [role="button"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"])),
|
||||
&:is(:hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
|
||||
#{$css-var-prefix}box-shadow: var(
|
||||
#{$css-var-prefix}button-hover-box-shadow,
|
||||
0 0 0 rgba(0, 0, 0, 0)
|
||||
);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:is([aria-current]:not([aria-current="false"])):focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
#{$parent-selector}
|
||||
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/code") {
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(#{$css-var-prefix}font-family); // 1
|
||||
}
|
||||
|
||||
#{$parent-selector} pre code,
|
||||
#{$parent-selector} pre samp {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
#{$parent-selector} pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}code-background-color);
|
||||
color: var(#{$css-var-prefix}code-color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
display: inline-block;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
#{$parent-selector} pre {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
overflow-x: auto;
|
||||
|
||||
> code,
|
||||
> samp {
|
||||
display: block;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
background: none;
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
#{$parent-selector} kbd {
|
||||
background-color: var(#{$css-var-prefix}code-kbd-background-color);
|
||||
color: var(#{$css-var-prefix}code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/embedded") {
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} audio,
|
||||
#{$parent-selector} video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7
|
||||
#{$parent-selector} audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
#{$parent-selector} :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Remove the border on images inside links in IE 10.
|
||||
// 2. Responsive by default
|
||||
#{$parent-selector} img {
|
||||
max-width: 100%; // 2
|
||||
height: auto; // 2
|
||||
border-style: none; // 1
|
||||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
#{$parent-selector} :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hide the overflow in IE
|
||||
#{$parent-selector} svg:not(:root),
|
||||
#{$parent-selector} svg:not(:host) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/figure") {
|
||||
/**
|
||||
* Figure
|
||||
*/
|
||||
|
||||
#{$parent-selector} figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/link") {
|
||||
/**
|
||||
* Link
|
||||
*/
|
||||
|
||||
#{$parent-selector} :where(a:not([role="button"])),
|
||||
#{$parent-selector} [role="link"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color); // 1
|
||||
color: var(#{$css-var-prefix}color);
|
||||
text-decoration: var(#{$css-var-prefix}text-decoration);
|
||||
text-decoration-color: var(#{$css-var-prefix}underline);
|
||||
text-underline-offset: 0.125em;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
text-decoration var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
|
||||
#{$css-var-prefix}text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
|
||||
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} a {
|
||||
&[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/misc") {
|
||||
/**
|
||||
* Misc
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
#{$parent-selector} hr {
|
||||
height: 0; // 2
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
#{$parent-selector} [hidden],
|
||||
#{$parent-selector} template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
#{$parent-selector} canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/table") {
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
#{$parent-selector} :where(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
#{$parent-selector} th,
|
||||
#{$parent-selector} td {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Footer
|
||||
#{$parent-selector} tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
var(#{$css-var-prefix}table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Striped
|
||||
@if enable-classes {
|
||||
#{$parent-selector} table {
|
||||
&.striped {
|
||||
tbody tr:nth-child(odd) th,
|
||||
tbody tr:nth-child(odd) td {
|
||||
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "content/typography") {
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
#{$parent-selector} b,
|
||||
#{$parent-selector} strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||
#{$parent-selector} sub,
|
||||
#{$parent-selector} sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
#{$parent-selector} sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
#{$parent-selector} sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#{$parent-selector} address,
|
||||
#{$parent-selector} blockquote,
|
||||
#{$parent-selector} dl,
|
||||
#{$parent-selector} ol,
|
||||
#{$parent-selector} p,
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} table,
|
||||
#{$parent-selector} ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-style: normal;
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
}
|
||||
|
||||
// Headings
|
||||
#{$parent-selector} h1,
|
||||
#{$parent-selector} h2,
|
||||
#{$parent-selector} h3,
|
||||
#{$parent-selector} h4,
|
||||
#{$parent-selector} h5,
|
||||
#{$parent-selector} h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height);
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
}
|
||||
|
||||
#{$parent-selector} h1 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
|
||||
}
|
||||
#{$parent-selector} h2 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
|
||||
}
|
||||
#{$parent-selector} h3 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
|
||||
}
|
||||
#{$parent-selector} h4 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
|
||||
}
|
||||
#{$parent-selector} h5 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
|
||||
}
|
||||
#{$parent-selector} h6 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a block
|
||||
#{$parent-selector}
|
||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(#{$css-var-prefix}typography-spacing-top);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
#{$parent-selector} p {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Heading group
|
||||
#{$parent-selector} hgroup {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:not(:first-child):last-child {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
||||
#{$css-var-prefix}font-weight: unset;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
#{$parent-selector} :where(ol, ul) {
|
||||
li {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
#{$parent-selector} ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
// Highlighted text
|
||||
#{$parent-selector} mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(#{$css-var-prefix}mark-background-color);
|
||||
color: var(#{$css-var-prefix}mark-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
#{$parent-selector} blockquote {
|
||||
display: block;
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
|
||||
color: var(#{$css-var-prefix}blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||
#{$parent-selector} abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Ins
|
||||
#{$parent-selector} ins {
|
||||
color: var(#{$css-var-prefix}ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
#{$parent-selector} del {
|
||||
color: var(#{$css-var-prefix}del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
#{$parent-selector} ::selection {
|
||||
background-color: var(#{$css-var-prefix}text-selection-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,471 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/basics") {
|
||||
// Helper
|
||||
$helper-previous-tags: "input, select, textarea, fieldset";
|
||||
/**
|
||||
* Basics form elements
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
#{$parent-selector} input,
|
||||
#{$parent-selector} optgroup,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
margin: 0; // 2
|
||||
font-size: 1rem; // 1
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
font-family: inherit; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
#{$parent-selector} input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||
#{$parent-selector} select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
#{$parent-selector} legend {
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
// 1. Remove the default vertical scrollbar in IE
|
||||
#{$parent-selector} textarea {
|
||||
overflow: auto; // 1
|
||||
}
|
||||
|
||||
// Remove the padding in IE 10
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Safari
|
||||
#{$parent-selector} ::-webkit-inner-spin-button,
|
||||
#{$parent-selector} ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the odd appearance in Chrome and Safari
|
||||
// 2. Correct the outline style in Safari
|
||||
#{$parent-selector} [type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS
|
||||
#{$parent-selector} [type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||
// 2. Change font properties to `inherit` in Safari
|
||||
#{$parent-selector} ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
// Remove the inner border and padding of focus outlines in Firefox
|
||||
#{$parent-selector} ::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Remove the focus outline in Firefox
|
||||
#{$parent-selector} :-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
#{$parent-selector} :-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Change the inconsistent appearance in IE (opinionated)
|
||||
#{$parent-selector} ::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Remove the border and padding in all browsers (opinionated)
|
||||
#{$parent-selector} [type="file"],
|
||||
#{$parent-selector} [type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
#{$parent-selector} fieldset {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Label & legend
|
||||
#{$parent-selector} label,
|
||||
#{$parent-selector} fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
|
||||
}
|
||||
|
||||
#{$parent-selector} fieldset legend {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
|
||||
#{$parent-selector} button[type="submit"],
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
appearance: none;
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
// Commons styles
|
||||
#{$parent-selector} input,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
|
||||
#{$css-var-prefix}box-shadow: none;
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
outline: none;
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
border-color var(#{$css-var-prefix}transition),
|
||||
color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
#{$parent-selector}
|
||||
input:not(
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[readonly]
|
||||
),
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:is(:active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(
|
||||
#{$css-var-prefix}form-element-active-background-color
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
#{$parent-selector}
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:is(:active, :focus) {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
#{$parent-selector}
|
||||
input:not(
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="range"],
|
||||
[type="file"],
|
||||
[readonly]
|
||||
),
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:focus {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
#{$parent-selector} select[disabled],
|
||||
#{$parent-selector} textarea[disabled],
|
||||
#{$parent-selector} label[aria-disabled="true"],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
#{$parent-selector} :where(input, select, textarea) {
|
||||
&:not(
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"],
|
||||
[type="range"]
|
||||
) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-right: calc(
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
||||
padding-inline-end: calc(
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
} @else {
|
||||
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||
}
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"]:not(select) {
|
||||
background-image: var(#{$css-var-prefix}icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"]:not(select) {
|
||||
background-image: var(#{$css-var-prefix}icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
#{$css-var-prefix}border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-active-border-color
|
||||
) !important;
|
||||
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-valid-focus-color) !important;
|
||||
}
|
||||
} @else {
|
||||
#{$css-var-prefix}border-color: var(
|
||||
#{$css-var-prefix}form-element-valid-active-border-color
|
||||
);
|
||||
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-valid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
#{$css-var-prefix}border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
||||
) !important;
|
||||
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
|
||||
}
|
||||
} @else {
|
||||
#{$css-var-prefix}border-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
||||
);
|
||||
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
0
|
||||
var(#{$css-var-prefix}outline-width)
|
||||
var(#{$css-var-prefix}form-element-invalid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} :where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
#{$parent-selector} input::placeholder,
|
||||
#{$parent-selector} input::-webkit-input-placeholder,
|
||||
#{$parent-selector} textarea::placeholder,
|
||||
#{$parent-selector} textarea::-webkit-input-placeholder,
|
||||
#{$parent-selector} select:invalid {
|
||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
#{$parent-selector} select {
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([multiple], [size]) {
|
||||
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
option {
|
||||
&:checked {
|
||||
background: var(#{$css-var-prefix}form-element-selected-background-color);
|
||||
color: var(#{$css-var-prefix}form-element-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} select {
|
||||
&:not([multiple], [size]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
#{$parent-selector} textarea {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
#{$css-var-prefix}icon-height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
||||
(var(#{$css-var-prefix}border-width) * 2)
|
||||
);
|
||||
background-position: top right 0.75rem !important;
|
||||
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||
$helper-previous-tags: $helper-previous-tags + ", .grid";
|
||||
}
|
||||
|
||||
#{$parent-selector} :where(#{$helper-previous-tags}) {
|
||||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
&[aria-invalid="false"] {
|
||||
+ small {
|
||||
color: var(#{$css-var-prefix}ins-color);
|
||||
}
|
||||
}
|
||||
&[aria-invalid="true"] {
|
||||
+ small {
|
||||
color: var(#{$css-var-prefix}del-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for Input inside a label
|
||||
#{$parent-selector} label {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||
/**
|
||||
* Checkboxes, Radios and Switches
|
||||
*/
|
||||
|
||||
// Labels
|
||||
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
||||
#{$parent-selector} label {
|
||||
&:has([type="checkbox"], [type="radio"]) {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -0.125em;
|
||||
margin-inline-end: 0.5em;
|
||||
border-width: var(#{$css-var-prefix}border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
background-image: var(#{$css-var-prefix}icon-checkbox);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
#{$parent-selector} [type="checkbox"] {
|
||||
&:indeterminate {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
background-image: var(#{$css-var-prefix}icon-minus);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
#{$parent-selector} [type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switches
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: 0.1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:not([aria-invalid]) {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(#{$css-var-prefix}color);
|
||||
box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-inline-start: calc(#{$switch-width} - #{$switch-height});
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
&[aria-invalid="false"] {
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
||||
}
|
||||
}
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
&[aria-invalid="true"] {
|
||||
#{$css-var-prefix}background-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-border-color
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"],
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
&[aria-invalid="false"] {
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
||||
}
|
||||
}
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
&[aria-invalid="true"] {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
// Wrapper
|
||||
@mixin color-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Swatch
|
||||
@mixin color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
|
||||
}
|
||||
|
||||
@if map.get($modules, "forms/input-color") {
|
||||
/**
|
||||
* Input type color
|
||||
*/
|
||||
|
||||
#{$parent-selector} [type="color"] {
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/input-date") {
|
||||
/**
|
||||
* Input type datetime
|
||||
*/
|
||||
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
#{$css-var-prefix}icon-position: 0.75rem;
|
||||
#{$css-var-prefix}icon-width: 1rem;
|
||||
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
|
||||
background-image: var(#{$css-var-prefix}icon-date);
|
||||
background-position: center right var(#{$css-var-prefix}icon-position);
|
||||
background-size: var(#{$css-var-prefix}icon-width) auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Time
|
||||
&[type="time"] {
|
||||
background-image: var(#{$css-var-prefix}icon-time);
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar picker
|
||||
#{$parent-selector} [type="date"],
|
||||
#{$parent-selector} [type="datetime-local"],
|
||||
#{$parent-selector} [type="month"],
|
||||
#{$parent-selector} [type="time"],
|
||||
#{$parent-selector} [type="week"] {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
width: var(#{$css-var-prefix}icon-width);
|
||||
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
|
||||
margin-left: var(#{$css-var-prefix}icon-position);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar icons are hidden in Firefox
|
||||
@if $enable-important {
|
||||
@-moz-document url-prefix() {
|
||||
#{$parent-selector} [type="date"],
|
||||
#{$parent-selector} [type="datetime-local"],
|
||||
#{$parent-selector} [type="month"],
|
||||
#{$parent-selector} [type="time"],
|
||||
#{$parent-selector} [type="week"] {
|
||||
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"]
|
||||
#{$parent-selector}
|
||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/input-file") {
|
||||
/**
|
||||
* Input type file
|
||||
*/
|
||||
|
||||
// 1. Hack to display the outline on the focused file selector button
|
||||
// with the forced overflow hidden on the input[type="file"] element.
|
||||
#{$parent-selector} [type="file"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
||||
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
|
||||
padding-left: var(#{$css-var-prefix}outline-width); // 1
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&::file-selector-button {
|
||||
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
&::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::file-selector-button {
|
||||
#{$css-var-prefix}box-shadow:
|
||||
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
// Config
|
||||
$height-track: 0.375rem;
|
||||
$height-thumb: 1.25rem;
|
||||
$border-thumb: 2px;
|
||||
|
||||
// Slider Track
|
||||
@mixin slider-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background-color: var(#{$css-var-prefix}range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
box-shadow var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
@mixin slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(#{$css-var-prefix}range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(#{$css-var-prefix}transition),
|
||||
transform var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
@if map.get($modules, "forms/input-range") {
|
||||
/**
|
||||
* Input type range
|
||||
*/
|
||||
|
||||
#{$parent-selector} [type="range"] {
|
||||
// Styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: none;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus-within {
|
||||
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
|
||||
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "forms/input-search") {
|
||||
/**
|
||||
* Input type search
|
||||
*/
|
||||
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
|
||||
background-image: var(#{$css-var-prefix}icon-search);
|
||||
background-position: center
|
||||
left
|
||||
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
|
||||
) !important;
|
||||
} @else {
|
||||
padding-inline-start: calc(
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
|
||||
);
|
||||
}
|
||||
background-position:
|
||||
center left 1.125rem,
|
||||
center right 0.75rem;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} :where(input) {
|
||||
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
&[aria-invalid] {
|
||||
background-position:
|
||||
center right 1.125rem,
|
||||
center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/*!
|
||||
* Pico CSS ✨ v2.1.1 (https://picocss.com)
|
||||
* Copyright 2019-2025 - Licensed under MIT
|
||||
*/
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use "sass:string";
|
||||
|
||||
// Display color as RGB
|
||||
@function display-rgb($color) {
|
||||
@return string.unquote(
|
||||
"rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
|
||||
color.channel($color, "blue") + ")"
|
||||
);
|
||||
}
|
||||
|
||||
// Generate a shadow layer
|
||||
@function shadow-layer($elevation, $blur, $opacity, $color) {
|
||||
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
|
||||
}
|
||||
|
||||
// Generate a shadow with 7 layers
|
||||
@function shadow($color) {
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strength: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
|
||||
@return shadow-layer(
|
||||
$box-shadow-elevation * 0.029,
|
||||
$box-shadow-blur-strength * 0.029,
|
||||
$box-shadow-opacity * 0.283,
|
||||
$color
|
||||
),
|
||||
shadow-layer(
|
||||
$box-shadow-elevation * 0.067,
|
||||
$box-shadow-blur-strength * 0.067,
|
||||
$box-shadow-opacity * 0.4,
|
||||
$color
|
||||
),
|
||||
shadow-layer(
|
||||
$box-shadow-elevation * 0.125,
|
||||
$box-shadow-blur-strength * 0.125,
|
||||
$box-shadow-opacity * 0.5,
|
||||
$color
|
||||
),
|
||||
shadow-layer(
|
||||
$box-shadow-elevation * 0.225,
|
||||
$box-shadow-blur-strength * 0.225,
|
||||
$box-shadow-opacity * 0.6,
|
||||
$color
|
||||
),
|
||||
shadow-layer(
|
||||
$box-shadow-elevation * 0.417,
|
||||
$box-shadow-blur-strength * 0.417,
|
||||
$box-shadow-opacity * 0.717,
|
||||
$color
|
||||
),
|
||||
shadow-layer($box-shadow-elevation, $box-shadow-blur-strength, $box-shadow-opacity, $color),
|
||||
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/container") and $enable-classes {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(#{$css-var-prefix}spacing);
|
||||
padding-left: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
.container {
|
||||
$first-breakpoint: true;
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/document") {
|
||||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; // 1
|
||||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Change the line height in all browsers (opinionated)
|
||||
// 2. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 3. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 4. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 5. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root),
|
||||
:where(:host) {
|
||||
-webkit-tap-highlight-color: transparent; // 4
|
||||
-webkit-text-size-adjust: 100%; // 5
|
||||
text-size-adjust: 100%; // 5
|
||||
background-color: var(#{$css-var-prefix}background-color);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}font-weight);
|
||||
font-size: var(#{$css-var-prefix}font-size);
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 2
|
||||
tab-size: 4; // 3
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
|
||||
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-width: 0; // HACK for children in overflow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/landmarks") {
|
||||
/**
|
||||
* Landmarks
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
}
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
#{$parent-selector} #{$semantic-root-element} {
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
// <header>, <main>, <footer> as containers
|
||||
@if $enable-semantic-container {
|
||||
$first-breakpoint: true;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
|
||||
@if $enable-viewport {
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
max-width: map.get($values, "viewport");
|
||||
@if $first-breakpoint {
|
||||
$first-breakpoint: false;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Regular vertical spacings for <header>, <main>, <footer>
|
||||
@else {
|
||||
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
|
||||
/**
|
||||
* Overflow auto
|
||||
*/
|
||||
|
||||
#{$parent-selector} .overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "layout/section") {
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
|
||||
#{$parent-selector} section {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Pico classless version
|
||||
@use "index" with (
|
||||
$enable-semantic-container: true,
|
||||
$enable-classes: false
|
||||
);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@use "helpers/copyright";
|
||||
@use "colors/utilities";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Pico conditional version
|
||||
@use "index" with (
|
||||
$parent-selector: ".pico"
|
||||
);
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// Pico classless version
|
||||
@use "index" with (
|
||||
$enable-semantic-container: true,
|
||||
$enable-viewport: false,
|
||||
$enable-classes: false
|
||||
);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@forward "settings";
|
||||
@use "index";
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
module.exports = {
|
||||
syntax: "postcss-scss",
|
||||
map: false,
|
||||
plugins: {
|
||||
"css-declaration-sorter": {
|
||||
order: "smacss"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Styles
|
||||
@use "default/styles";
|
||||
|
||||
// Colors schemes
|
||||
@use "default/schemes";
|
||||
|
|
@ -1,261 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
@use "../../colors" as *;
|
||||
@use "../../settings" as *;
|
||||
@use "../../helpers/functions";
|
||||
@use "theme-colors";
|
||||
|
||||
// Default: Dark theme
|
||||
@mixin theme {
|
||||
color-scheme: dark;
|
||||
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
|
||||
|
||||
// Text color
|
||||
#{$css-var-prefix}color: #{$zinc-200};
|
||||
|
||||
// Text selection color
|
||||
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
|
||||
|
||||
// Muted colors
|
||||
#{$css-var-prefix}muted-color: #{$zinc-450};
|
||||
#{$css-var-prefix}muted-border-color: #{$slate-850};
|
||||
|
||||
// Primary colors
|
||||
#{$css-var-prefix}primary: theme-colors.get("primary", "dark");
|
||||
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
|
||||
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
|
||||
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
|
||||
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
|
||||
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
|
||||
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
|
||||
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
|
||||
|
||||
// Secondary colors
|
||||
#{$css-var-prefix}secondary: #{$zinc-350};
|
||||
#{$css-var-prefix}secondary-background: #{$slate-600};
|
||||
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
|
||||
#{$css-var-prefix}secondary-hover: #{$zinc-250};
|
||||
#{$css-var-prefix}secondary-hover-background: #{$slate-550};
|
||||
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
|
||||
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
|
||||
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
|
||||
#{$css-var-prefix}secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
#{$css-var-prefix}contrast: #{$slate-100};
|
||||
#{$css-var-prefix}contrast-background: #{$slate-50};
|
||||
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
|
||||
#{$css-var-prefix}contrast-hover: #{$white};
|
||||
#{$css-var-prefix}contrast-hover-background: #{$white};
|
||||
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
|
||||
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
|
||||
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
|
||||
#{$css-var-prefix}contrast-inverse: #{$black};
|
||||
|
||||
// Box shadow
|
||||
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
|
||||
|
||||
// Typography
|
||||
@if map.get($modules, "content/typography") {
|
||||
// Headings colors
|
||||
#{$css-var-prefix}h1-color: #{$zinc-50};
|
||||
#{$css-var-prefix}h2-color: #{$zinc-100};
|
||||
#{$css-var-prefix}h3-color: #{$zinc-200};
|
||||
#{$css-var-prefix}h4-color: #{$zinc-250};
|
||||
#{$css-var-prefix}h5-color: #{$zinc-300};
|
||||
#{$css-var-prefix}h6-color: #{$zinc-400};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
#{$css-var-prefix}mark-background-color: #{$azure-750};
|
||||
#{$css-var-prefix}mark-color: #{$white};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<del>)
|
||||
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
|
||||
#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
|
||||
|
||||
// Blockquote
|
||||
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
|
||||
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
|
||||
// Button
|
||||
@if map.get($modules, "content/button") {
|
||||
// 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.
|
||||
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
// Table
|
||||
@if map.get($modules, "content/table") {
|
||||
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
|
||||
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
|
||||
}
|
||||
|
||||
// Code
|
||||
@if map.get($modules, "content/code") {
|
||||
#{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
|
||||
#{$css-var-prefix}code-color: #{$zinc-400};
|
||||
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
|
||||
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
|
||||
}
|
||||
|
||||
// Form elements
|
||||
@if map.get($modules, "forms/basics") {
|
||||
#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
|
||||
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
|
||||
#{$css-var-prefix}form-element-border-color: #{$slate-800};
|
||||
#{$css-var-prefix}form-element-color: #{$zinc-100};
|
||||
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
|
||||
#{$css-var-prefix}form-element-active-background-color: #{color.mix(
|
||||
$slate-900,
|
||||
$slate-850,
|
||||
75%
|
||||
)};
|
||||
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
|
||||
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
|
||||
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
|
||||
$red-500,
|
||||
$slate-600,
|
||||
75%
|
||||
)};
|
||||
#{$css-var-prefix}form-element-invalid-focus-color: var(
|
||||
#{$css-var-prefix}form-element-invalid-active-border-color
|
||||
);
|
||||
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
|
||||
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
|
||||
$jade-450,
|
||||
$slate-600,
|
||||
75%
|
||||
)};
|
||||
#{$css-var-prefix}form-element-valid-focus-color: var(
|
||||
#{$css-var-prefix}form-element-valid-active-border-color
|
||||
);
|
||||
}
|
||||
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||
#{$css-var-prefix}switch-background-color: #{$slate-750};
|
||||
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}switch-color: #{$white};
|
||||
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
|
||||
}
|
||||
|
||||
// Range (input[type="range"])
|
||||
@if map.get($modules, "forms/input-range") {
|
||||
#{$css-var-prefix}range-border-color: #{$slate-850};
|
||||
#{$css-var-prefix}range-active-border-color: #{$slate-800};
|
||||
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
|
||||
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
|
||||
}
|
||||
|
||||
// Accordion (<details>)
|
||||
@if map.get($modules, "components/accordion") {
|
||||
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
|
||||
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
|
||||
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
|
||||
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
@if map.get($modules, "components/card") {
|
||||
#{$css-var-prefix}card-background-color: #{$slate-900};
|
||||
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
|
||||
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
#{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
|
||||
}
|
||||
|
||||
// Dropdown (details.dropdown)
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
|
||||
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
|
||||
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
|
||||
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
|
||||
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
|
||||
}
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
@if map.get($modules, "components/loading") {
|
||||
#{$css-var-prefix}loading-spinner-opacity: 0.5;
|
||||
}
|
||||
|
||||
// Modal (<dialog>)
|
||||
@if map.get($modules, "components/modal") {
|
||||
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
|
||||
}
|
||||
|
||||
// Progress
|
||||
@if map.get($modules, "components/progress") {
|
||||
#{$css-var-prefix}progress-background-color: #{$slate-850};
|
||||
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
|
||||
}
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
@if map.get($modules, "components/tooltip") {
|
||||
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
|
||||
}
|
||||
|
||||
// Form validation icons
|
||||
@if map.get($modules, "forms/basics") {
|
||||
#{$css-var-prefix}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='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
#{$css-var-prefix}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='#{functions.display-rgb(color.mix($red-500, $slate-600))}' 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");
|
||||
}
|
||||
|
||||
// Focus for buttons, radio and select
|
||||
@if map.get($modules, "forms/basics") {
|
||||
input:is(
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="file"]
|
||||
) {
|
||||
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Chevron icons
|
||||
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
|
||||
// Change the icon color to black for accordion and dropdown .contrast buttons
|
||||
@if $enable-classes {
|
||||
#{$parent-selector} details {
|
||||
summary {
|
||||
&[role="button"].contrast:not(.outline) {
|
||||
&::after {
|
||||
filter: brightness(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Loading icon (animated)
|
||||
@if map.get($modules, "components/loading") {
|
||||
// Change the icon color to black for .contrast buttons
|
||||
@if $enable-classes {
|
||||
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
|
||||
&.contrast:is(
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[role="button"]
|
||||
):not(.outline) {
|
||||
&::before {
|
||||
filter: brightness(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue