From 6bc6d79caffd3e3e0fc94fc5450d5e9ab5f5852c Mon Sep 17 00:00:00 2001 From: Yohn Date: Sat, 18 Jan 2025 19:31:23 -0500 Subject: [PATCH] Fixes header and footer in modal when form is direct child of the article, and if the form would be between the header and footer tags. Modals with the size classes on the dialog were not sizing correctly when form was a child of the modal, and this has been corrected. --- README.md | 8 ++++---- docs/index.html | 11 ++++++----- package.json | 2 +- scss/components/_card.scss | 4 ++-- scss/components/_modal.scss | 36 +++++++++++++++++++++--------------- scss/helpers/_copyright.scss | 2 +- 6 files changed, 35 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 5618c7e1..a9f0a9b4 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css: Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css. ```html - + ``` ### Install with NPM @@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports: ```html ``` @@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container: ```html ``` @@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great: Hello, world! diff --git a/docs/index.html b/docs/index.html index 24b3a635..c34d7aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -224,8 +224,7 @@
-

Yohns PicoCSS Fork v2.2.6

-

Not in npm yet, but will be soon.

+

Yohns PicoCSS Fork v2.2.7

I've merged some open pull requests from the original Pico repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted @@ -1080,6 +1079,8 @@

Modal

+

<form> tags can be between the <header> and <footer>, or wrap around the <header> and <footer> tags within the modal.

+
@@ -1639,7 +1640,7 @@ function changeTheme(newTheme) { const linkElement = document.getElementById('theme-color-ss'); if (linkElement) { - linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.6/css/pico.' + newTheme + '.min.css'); + linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.7/css/pico.' + newTheme + '.min.css'); } } diff --git a/package.json b/package.json index 26ed56bc..0dc445d1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yohns/picocss", - "version": "2.2.6", + "version": "2.2.7", "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.", "authors": [ { diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 2161162e..6d5da281 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -6,8 +6,8 @@ * Card (
, role="article") */ - #{$parent-selector} article:not(:has(> form)), - #{$parent-selector} [role="article"]:not(:has(> form)), + #{$parent-selector} article:not(:has(> form:first-child)), + #{$parent-selector} [role="article"]:not(:has(> form:first-child)), #{$parent-selector} article > form, #{$parent-selector} [role="article"] > form { margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index 46e24fa4..c1cc8c6a 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -11,6 +11,25 @@ #{$css-var-prefix}scrollbar-width: 0px; } + #{$parent-selector} dialog:not(.modal-fs, .modal-xlg, .modal-lg, .modal-md, .modal-sm) { + > article:not(:has(> form:first-child)), + > article > form:first-child { + width: 100%; + + @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"); + } + } + } + } + #{$parent-selector} dialog { display: grid; z-index: 999; @@ -37,26 +56,13 @@ } // Content - > article:not(:has(> form)), - > article > form { + > article:not(:has(> form:first-child)), + > article > form:first-child { $close-selector: if( $enable-classes, ".close, :is(a, button)[rel=prev]", ":is(a, button)[rel=prev]" ); - width: 100%; - - @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 { > * { diff --git a/scss/helpers/_copyright.scss b/scss/helpers/_copyright.scss index 3e7ae1c7..f1316cdd 100644 --- a/scss/helpers/_copyright.scss +++ b/scss/helpers/_copyright.scss @@ -1,4 +1,4 @@ /*! - * Pico CSS ✨ v2.2.6 (https://github.com/Yohn/PicoCSS) + * Pico CSS ✨ v2.2.7 (https://github.com/Yohn/PicoCSS) * Copyright 2019-2025 - Licensed under MIT */