From 532be6f0ad6db6fc3c467577a6b73be12c88d53b Mon Sep 17 00:00:00 2001 From: jtbx Date: Sat, 23 May 2026 20:02:55 +0200 Subject: [PATCH 01/16] Theme: Update for hugo 0.153: switch to dart-sass libsass will be deprecated in hugo v0.153. Also fix some SASS 2.0 deprecation notices in our scss files --- README.md | 2 ++ themes/ccchh/assets/sass/main.scss | 26 ++++++++++++++++--------- themes/ccchh/layouts/partials/head.html | 4 ++-- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 8bf8426..ce34ab0 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ Please note, that the website should be re-deployed at least daily to update the ### Add Pages 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 diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss index 0396a7e..9784806 100644 --- a/themes/ccchh/assets/sass/main.scss +++ b/themes/ccchh/assets/sass/main.scss @@ -1,3 +1,6 @@ +@use "sass:map"; +@use "sass:math"; + $roomstate_color_unknown: #dda218; $roomstate_color_open: var(--ins-color); $roomstate_color_closed: var(--del-color); @@ -164,7 +167,12 @@ body>main { margin-bottom: 1rem; } - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin: 0.5rem 1rem; } @@ -202,7 +210,7 @@ body>main { display: block; margin: 0 auto; // (250px - 2*var(--grid-spacing-horizontal)) * 3/4 - max-height: (222px * 3/4); + max-height: math.div(222px * 3, 4); } // 2*250px + 2*var(--spacing) + 1px @@ -211,7 +219,7 @@ body>main { img.groups-img { // (150px - 2*var(--grid-spacing-horizontal)) * 3/4 - max-height: (122px*3/4); + max-height: math.div(122px*3, 4); } } @@ -221,7 +229,7 @@ body>main { img.groups-img { // (350px - 2*var(--grid-spacing-horizontal)) * 3/4 - max-height: (322px*3/4); + max-height: math.div(322px*3, 4); } // 2*350px + 2*var(--spacing) + 1px @@ -230,7 +238,7 @@ body>main { img.groups-img { // (250px - 2*var(--grid-spacing-horizontal)) * 3/4 - max-height: (222px*3/4); + max-height: math.div(222px*3, 4); } } } @@ -295,7 +303,7 @@ body>main { // When the header content doesn't display nicely anymore, switch to mobile mode. @import "../pico-1.5.11/scss/variables"; - @media (max-width: map-get($breakpoints, md)) { + @media (max-width: map.get($breakpoints, md)) { .hamburger-button { display: unset; position: absolute; @@ -375,15 +383,15 @@ body>main { } // Use the media queries, which we need, from here: - @if map-get($breakpoints, "sm") { - @media (min-width: map-get($breakpoints, "sm")) { + @if map.get($breakpoints, "sm") { + @media (min-width: map.get($breakpoints, "sm")) { ul { padding-left: 0; padding-right: 0; } .main-nav { - max-width: map-get($viewports, "sm"); + max-width: map.get($viewports, "sm"); } } } diff --git a/themes/ccchh/layouts/partials/head.html b/themes/ccchh/layouts/partials/head.html index 936de41..22ed943 100644 --- a/themes/ccchh/layouts/partials/head.html +++ b/themes/ccchh/layouts/partials/head.html @@ -1,5 +1,5 @@ -{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}} -{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}} +{{- $cssOptionsMain := dict "transpiler" "dartsass" "targetPath" "css/style.css" -}} +{{- $cssOptionsPico := dict "transpiler" "dartsass" "targetPath" "css/pico.css" -}} {{- $jsResources := resources.Match "js/*.js" }} From 122b3aeaf0f1b36bb8acaf39fae45c32b9ce16e4 Mon Sep 17 00:00:00 2001 From: jtbx Date: Sat, 23 May 2026 18:40:48 +0200 Subject: [PATCH 02/16] Theme,CI: Update for hugo v0.156 (.Site.Data) --- .forgejo/workflows/deploy.yaml | 2 +- themes/ccchh/layouts/shortcodes/calendar-table.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml index b08a439..496bfc0 100644 --- a/.forgejo/workflows/deploy.yaml +++ b/.forgejo/workflows/deploy.yaml @@ -13,7 +13,7 @@ jobs: build: runs-on: docker container: - image: hugomods/hugo:exts-0.148.1 + image: hugomods/hugo:exts-0.156.0 steps: - name: Pipeline info run: | diff --git a/themes/ccchh/layouts/shortcodes/calendar-table.html b/themes/ccchh/layouts/shortcodes/calendar-table.html index 558f824..c0c2cbb 100644 --- a/themes/ccchh/layouts/shortcodes/calendar-table.html +++ b/themes/ccchh/layouts/shortcodes/calendar-table.html @@ -1,4 +1,4 @@ -{{- index .Site.Data "calendar.json" }} +{{- index hugo.Data "calendar.json" }} @@ -8,7 +8,7 @@ - {{- range first 7 (sort $.Site.Data.calendar "dtstart" ) }} + {{- range first 7 (sort hugo.Data.calendar "dtstart" ) }} {{- if eq ._type "vevent"}} {{- $start := time .dtstart }} From 58f9de807d73cdc0cba8eb1ced685ea96c2e19de Mon Sep 17 00:00:00 2001 From: jtbx Date: Sat, 23 May 2026 18:42:34 +0200 Subject: [PATCH 03/16] Theme,CI: Update for hugo v0.158 (renamed LanguageCode to Locale) --- .forgejo/workflows/deploy.yaml | 2 +- hugo.toml | 2 +- themes/ccchh/layouts/_default/rss.xml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml index 496bfc0..c44da2c 100644 --- a/.forgejo/workflows/deploy.yaml +++ b/.forgejo/workflows/deploy.yaml @@ -13,7 +13,7 @@ jobs: build: runs-on: docker container: - image: hugomods/hugo:exts-0.156.0 + image: hugomods/hugo:exts-0.158.0 steps: - name: Pipeline info run: | diff --git a/hugo.toml b/hugo.toml index 3b2548b..62fb6ad 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1,5 +1,5 @@ baseURL = 'https://hamburg.ccc.de/' -languageCode = 'de-de' +locale = 'de-de' defaultContentLanguage = 'de' timeZone = 'Europe/Berlin' title = 'CCC Hansestadt Hamburg e.V.' diff --git a/themes/ccchh/layouts/_default/rss.xml b/themes/ccchh/layouts/_default/rss.xml index f4a91aa..baf0f96 100644 --- a/themes/ccchh/layouts/_default/rss.xml +++ b/themes/ccchh/layouts/_default/rss.xml @@ -37,7 +37,7 @@ {{ .Permalink }} Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }} Hugo - {{ site.Language.LanguageCode }}{{ with $authorEmail }} + {{ site.Language.Locale }}{{ with $authorEmail }} {{.}}{{ with $authorName }} ({{ . }}){{ end }}{{ end }}{{ with $authorEmail }} {{ . }}{{ with $authorName }} ({{ . }}){{ end }}{{ end }}{{ with .Site.Copyright }} {{ . }}{{ end }}{{ if not .Date.IsZero }} From d4f658c42056112efcf1b2d4cba8b1ba46922403 Mon Sep 17 00:00:00 2001 From: jtbx Date: Sat, 23 May 2026 15:58:16 +0200 Subject: [PATCH 04/16] WIP Theme: Update to pico-css v2 --- .../{pico-1.5.11 => pico-1.5.13}/LICENSE.md | 0 .../scss/_functions.scss | 0 .../scss/_variables.scss | 0 .../scss/components/_accordion.scss | 0 .../scss/components/_card.scss | 0 .../scss/components/_dropdown.scss | 0 .../scss/components/_modal.scss | 0 .../scss/components/_nav.scss | 0 .../scss/components/_progress.scss | 0 .../scss/content/_button.scss | 0 .../scss/content/_code.scss | 0 .../scss/content/_embedded.scss | 0 .../scss/content/_form-alt-input-types.scss | 0 .../scss/content/_form-checkbox-radio.scss | 0 .../scss/content/_form.scss | 0 .../scss/content/_miscs.scss | 0 .../scss/content/_table.scss | 0 .../scss/content/_typography.scss | 0 .../scss/layout/_container.scss | 0 .../scss/layout/_document.scss | 0 .../scss/layout/_grid.scss | 0 .../scss/layout/_scroller.scss | 0 .../scss/layout/_section.scss | 0 .../scss/layout/_sectioning.scss | 0 .../scss/pico.classless.scss | 0 .../scss/pico.fluid.classless.scss | 0 .../scss/pico.scss | 4 +- .../scss/pico.slim.scss | 4 +- .../assets/pico-1.5.13/scss/postcss.config.js | 9 + .../scss/themes/default.scss | 0 .../scss/themes/default/_colors.scss | 0 .../scss/themes/default/_dark.scss | 0 .../scss/themes/default/_light.scss | 0 .../scss/themes/default/_styles.scss | 0 .../scss/utilities/_accessibility.scss | 0 .../scss/utilities/_loading.scss | 0 .../scss/utilities/_reduce-motion.scss | 0 .../scss/utilities/_tooltip.scss | 0 themes/ccchh/assets/pico-2.1.1/LICENSE.md | 21 + .../ccchh/assets/pico-2.1.1/scss/_index.scss | 49 + .../assets/pico-2.1.1/scss/_settings.scss | 143 +++ .../assets/pico-2.1.1/scss/colors/_index.scss | 886 ++++++++++++++++++ .../colors/utilities/_background-colors.scss | 74 ++ .../scss/colors/utilities/_colors.scss | 51 + .../scss/colors/utilities/_css-vars.scss | 55 ++ .../scss/colors/utilities/_index.scss | 8 + .../scss/colors/utilities/_settings.scss | 106 +++ .../scss/colors/utilities/_utils.scss | 60 ++ .../scss/components/_accordion.scss | 116 +++ .../pico-2.1.1/scss/components/_card.scss | 46 + .../pico-2.1.1/scss/components/_dropdown.scss | 280 ++++++ .../pico-2.1.1/scss/components/_group.scss | 120 +++ .../pico-2.1.1/scss/components/_loading.scss | 46 + .../pico-2.1.1/scss/components/_modal.scss | 177 ++++ .../pico-2.1.1/scss/components/_nav.scss | 160 ++++ .../pico-2.1.1/scss/components/_progress.scss | 102 ++ .../pico-2.1.1/scss/components/_tooltip.scss | 215 +++++ .../pico-2.1.1/scss/content/_button.scss | 209 +++++ .../assets/pico-2.1.1/scss/content/_code.scss | 77 ++ .../pico-2.1.1/scss/content/_embedded.scss | 54 ++ .../pico-2.1.1/scss/content/_figure.scss | 19 + .../assets/pico-2.1.1/scss/content/_link.scss | 69 ++ .../assets/pico-2.1.1/scss/content/_misc.scss | 38 + .../pico-2.1.1/scss/content/_table.scss | 62 ++ .../pico-2.1.1/scss/content/_typography.scss | 182 ++++ .../assets/pico-2.1.1/scss/forms/_basics.scss | 471 ++++++++++ .../scss/forms/_checkbox-radio-switch.scss | 177 ++++ .../pico-2.1.1/scss/forms/_input-color.scss | 37 + .../pico-2.1.1/scss/forms/_input-date.scss | 60 ++ .../pico-2.1.1/scss/forms/_input-file.scss | 41 + .../pico-2.1.1/scss/forms/_input-range.scss | 100 ++ .../pico-2.1.1/scss/forms/_input-search.scss | 60 ++ .../pico-2.1.1/scss/helpers/_copyright.scss | 4 + .../pico-2.1.1/scss/helpers/_functions.scss | 55 ++ .../pico-2.1.1/scss/layout/_container.scss | 33 + .../pico-2.1.1/scss/layout/_document.scss | 53 ++ .../assets/pico-2.1.1/scss/layout/_grid.scss | 26 + .../pico-2.1.1/scss/layout/_landmarks.scss | 62 ++ .../scss/layout/_overflow-auto.scss | 12 + .../pico-2.1.1/scss/layout/_section.scss | 12 + .../pico-2.1.1/scss/pico.classless.scss | 5 + .../assets/pico-2.1.1/scss/pico.colors.scss | 2 + .../pico-2.1.1/scss/pico.conditional.scss | 4 + .../pico-2.1.1/scss/pico.fluid.classless.scss | 6 + themes/ccchh/assets/pico-2.1.1/scss/pico.scss | 2 + .../assets/pico-2.1.1/scss/postcss.config.js | 9 + .../pico-2.1.1/scss/themes/_default.scss | 5 + .../pico-2.1.1/scss/themes/default/_dark.scss | 261 ++++++ .../scss/themes/default/_light.scss | 221 +++++ .../scss/themes/default/_schemes.scss | 41 + .../scss/themes/default/_styles.scss | 435 +++++++++ .../scss/themes/default/_theme-colors.scss | 491 ++++++++++ .../scss/utilities/_accessibility.scss | 57 ++ .../scss/utilities/_reduce-motion.scss | 30 + themes/ccchh/assets/sass/main.scss | 9 +- themes/ccchh/assets/sass/pico-ccchh.scss | 84 +- 96 files changed, 6261 insertions(+), 46 deletions(-) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/LICENSE.md (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/_functions.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/_variables.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_accordion.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_card.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_dropdown.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_modal.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_nav.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/components/_progress.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_button.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_code.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_embedded.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_form-alt-input-types.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_form-checkbox-radio.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_form.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_miscs.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_table.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/content/_typography.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_container.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_document.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_grid.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_scroller.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_section.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/layout/_sectioning.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/pico.classless.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/pico.fluid.classless.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/pico.scss (94%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/pico.slim.scss (93%) create mode 100644 themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/themes/default.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/themes/default/_colors.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/themes/default/_dark.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/themes/default/_light.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/themes/default/_styles.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/utilities/_accessibility.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/utilities/_loading.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/utilities/_reduce-motion.scss (100%) rename themes/ccchh/assets/{pico-1.5.11 => pico-1.5.13}/scss/utilities/_tooltip.scss (100%) create mode 100644 themes/ccchh/assets/pico-2.1.1/LICENSE.md create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/_index.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/_settings.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_checkbox-radio-switch.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_input-color.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_input-date.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_input-file.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_input-range.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/forms/_input-search.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/helpers/_copyright.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/helpers/_functions.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_container.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_document.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_grid.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_landmarks.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_overflow-auto.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/layout/_section.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/pico.classless.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/pico.colors.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/pico.conditional.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/pico.fluid.classless.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/pico.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/postcss.config.js create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/_default.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/default/_dark.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/default/_light.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/default/_schemes.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/default/_styles.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/themes/default/_theme-colors.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/utilities/_accessibility.scss create mode 100644 themes/ccchh/assets/pico-2.1.1/scss/utilities/_reduce-motion.scss diff --git a/themes/ccchh/assets/pico-1.5.11/LICENSE.md b/themes/ccchh/assets/pico-1.5.13/LICENSE.md similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/LICENSE.md rename to themes/ccchh/assets/pico-1.5.13/LICENSE.md diff --git a/themes/ccchh/assets/pico-1.5.11/scss/_functions.scss b/themes/ccchh/assets/pico-1.5.13/scss/_functions.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/_functions.scss rename to themes/ccchh/assets/pico-1.5.13/scss/_functions.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/_variables.scss b/themes/ccchh/assets/pico-1.5.13/scss/_variables.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/_variables.scss rename to themes/ccchh/assets/pico-1.5.13/scss/_variables.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_accordion.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_card.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_dropdown.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_modal.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_nav.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss b/themes/ccchh/assets/pico-1.5.13/scss/components/_progress.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss rename to themes/ccchh/assets/pico-1.5.13/scss/components/_progress.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_button.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_code.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_embedded.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form-alt-input-types.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form-alt-input-types.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form-checkbox-radio.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form-checkbox-radio.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_form.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_miscs.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_table.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss b/themes/ccchh/assets/pico-1.5.13/scss/content/_typography.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss rename to themes/ccchh/assets/pico-1.5.13/scss/content/_typography.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_container.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_container.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_document.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_document.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_grid.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_grid.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_scroller.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_scroller.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_section.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_section.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss b/themes/ccchh/assets/pico-1.5.13/scss/layout/_sectioning.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss rename to themes/ccchh/assets/pico-1.5.13/scss/layout/_sectioning.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.classless.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss rename to themes/ccchh/assets/pico-1.5.13/scss/pico.classless.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.fluid.classless.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss rename to themes/ccchh/assets/pico-1.5.13/scss/pico.fluid.classless.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.scss similarity index 94% rename from themes/ccchh/assets/pico-1.5.11/scss/pico.scss rename to themes/ccchh/assets/pico-1.5.13/scss/pico.scss index b248799..6cdde55 100644 --- a/themes/ccchh/assets/pico-1.5.11/scss/pico.scss +++ b/themes/ccchh/assets/pico-1.5.13/scss/pico.scss @@ -1,6 +1,6 @@ /*! - * Pico CSS v1.5.11 (https://picocss.com) - * Copyright 2019-2023 - Licensed under MIT + * Pico CSS v1.5.13 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT */ // Config diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss b/themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss similarity index 93% rename from themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss rename to themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss index cb9aa42..9916cc8 100644 --- a/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss +++ b/themes/ccchh/assets/pico-1.5.13/scss/pico.slim.scss @@ -1,6 +1,6 @@ /*! - * Pico CSS v1.5.11 (https://picocss.com) - * Copyright 2019-2023 - Licensed under MIT + * Pico CSS v1.5.13 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT * * Slim version example * You can export only the modules you need diff --git a/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js b/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js new file mode 100644 index 0000000..4eaff47 --- /dev/null +++ b/themes/ccchh/assets/pico-1.5.13/scss/postcss.config.js @@ -0,0 +1,9 @@ +module.exports = { + syntax: "postcss-scss", + map: false, + plugins: { + "css-declaration-sorter": { + order: "smacss" + } + } +} \ No newline at end of file diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_colors.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_colors.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_dark.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_dark.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_light.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_light.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss b/themes/ccchh/assets/pico-1.5.13/scss/themes/default/_styles.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss rename to themes/ccchh/assets/pico-1.5.13/scss/themes/default/_styles.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_accessibility.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_accessibility.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_loading.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_loading.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_reduce-motion.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_reduce-motion.scss diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss b/themes/ccchh/assets/pico-1.5.13/scss/utilities/_tooltip.scss similarity index 100% rename from themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss rename to themes/ccchh/assets/pico-1.5.13/scss/utilities/_tooltip.scss diff --git a/themes/ccchh/assets/pico-2.1.1/LICENSE.md b/themes/ccchh/assets/pico-2.1.1/LICENSE.md new file mode 100644 index 0000000..94af9b1 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/LICENSE.md @@ -0,0 +1,21 @@ +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. diff --git a/themes/ccchh/assets/pico-2.1.1/scss/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/_index.scss new file mode 100644 index 0000000..1058cdd --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/_index.scss @@ -0,0 +1,49 @@ +@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 diff --git a/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss b/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss new file mode 100644 index 0000000..d1c3e46 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/_settings.scss @@ -0,0 +1,143 @@ +@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
,
,
+// with $enable-semantic-container and $enable-responsive-spacings +$semantic-root-element: "body" !default; + +// Enable
,
,
inside $semantic-root-element as containers +$enable-semantic-container: false !default; + +// Enable a centered viewport for
,
,
inside $semantic-root-element +// Fluid layout if disabled +$enable-viewport: true !default; + +// Enable responsive spacings for
,
,
,
,
+// 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 +); diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss new file mode 100644 index 0000000..ec7c615 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/_index.scss @@ -0,0 +1,886 @@ +// 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, + ), +); diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss new file mode 100644 index 0000000..2656e81 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_background-colors.scss @@ -0,0 +1,74 @@ +@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); + } + } + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss new file mode 100644 index 0000000..9f91fd6 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_colors.scss @@ -0,0 +1,51 @@ +@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; + } + } + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss new file mode 100644 index 0000000..8007d49 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_css-vars.scss @@ -0,0 +1,55 @@ +@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") + )}; + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss new file mode 100644 index 0000000..7ad384b --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_index.scss @@ -0,0 +1,8 @@ +@forward "settings"; +@use "css-vars" as *; +@use "colors" as *; +@use "background-colors" as *; + +@include css-vars; +@include colors; +@include background-colors; diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss new file mode 100644 index 0000000..2a52cd8 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_settings.scss @@ -0,0 +1,106 @@ +@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 +); diff --git a/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss new file mode 100644 index 0000000..3e1c17e --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/colors/utilities/_utils.scss @@ -0,0 +1,60 @@ +@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") + ")" + ); +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss new file mode 100644 index 0000000..28a0ad0 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_accordion.scss @@ -0,0 +1,116 @@ +@use "sass:map"; +@use "../settings" as *; + +@if map.get($modules, "components/accordion") { + /** + * Accordion (
) + */ + + #{$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; + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss new file mode 100644 index 0000000..19d8358 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_card.scss @@ -0,0 +1,46 @@ +@use "sass:map"; +@use "../settings" as *; + +@if map.get($modules, "components/card") { + /** + * Card (
) + */ + + #{$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); + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss new file mode 100644 index 0000000..963ba67 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_dropdown.scss @@ -0,0 +1,280 @@ +@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); + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss new file mode 100644 index 0000000..8b2631b --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_group.scss @@ -0,0 +1,120 @@ +@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; + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss new file mode 100644 index 0000000..ab29d69 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_loading.scss @@ -0,0 +1,46 @@ +@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; + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss new file mode 100644 index 0000000..d17943b --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_modal.scss @@ -0,0 +1,177 @@ +@use "sass:map"; +@use "../settings" as *; + +@if map.get($modules, "components/modal") { + /** + * Modal () + */ + + :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; + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss new file mode 100644 index 0000000..c14dc4a --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_nav.scss @@ -0,0 +1,160 @@ +@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: "\\"; + } + } + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss new file mode 100644 index 0000000..576b8e4 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_progress.scss @@ -0,0 +1,102 @@ +@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; + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss b/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss new file mode 100644 index 0000000..a6d61ba --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/components/_tooltip.scss @@ -0,0 +1,215 @@ +@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; + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss new file mode 100644 index 0000000..2887e7e --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_button.scss @@ -0,0 +1,209 @@ +@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; + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss new file mode 100644 index 0000000..9579009 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_code.scss @@ -0,0 +1,77 @@ +@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; + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss new file mode 100644 index 0000000..6bf11af --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_embedded.scss @@ -0,0 +1,54 @@ +@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; + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss new file mode 100644 index 0000000..d479f1f --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_figure.scss @@ -0,0 +1,19 @@ +@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); + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss new file mode 100644 index 0000000..1e33115 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_link.scss @@ -0,0 +1,69 @@ +@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; + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss new file mode 100644 index 0000000..f0a763d --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_misc.scss @@ -0,0 +1,38 @@ +@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; + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss new file mode 100644 index 0000000..1239bc6 --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_table.scss @@ -0,0 +1,62 @@ +@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); + } + } + } + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss b/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss new file mode 100644 index 0000000..d22956a --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/content/_typography.scss @@ -0,0 +1,182 @@ +@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); + } +} diff --git a/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss b/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss new file mode 100644 index 0000000..39fbe1e --- /dev/null +++ b/themes/ccchh/assets/pico-2.1.1/scss/forms/_basics.scss @@ -0,0 +1,471 @@ +@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 `