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 5618c7e1c..a9f0a9b4b 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 24b3a6350..c34d7aae6 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 @@

-md- Breakpoints

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 @@

Modal with a Form!

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 26ed56bc2..0dc445d19 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 2161162e5..6d5da281e 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 46e24fa49..c1cc8c6ac 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 3e7ae1c7e..f1316cdd0 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 */