mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source 
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.
This commit is contained in:
Yohn 2025-01-18 19:31:23 -05:00
parent 389e319c1e
commit 6bc6d79caf
6 changed files with 35 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -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. Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.min.css" />
``` ```
### Install with NPM ### Install with NPM
@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css"
/> />
``` ```
@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
```html ```html
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.fluid.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.fluid.classless.min.css"
/> />
``` ```
@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css"
/> />
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>

11
docs/index.html
View file

@ -224,8 +224,7 @@
<main class="col-12 col-md-9 col-lg-10"> <main class="col-12 col-md-9 col-lg-10">
<article> <article>
<header> <header>
<h2>Yohns PicoCSS Fork v2.2.6</h2> <h2>Yohns PicoCSS Fork v2.2.7</h2>
<p class="mb-0">Not in npm yet, but will be soon.</p>
</header> </header>
<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a> <p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@ -1080,6 +1079,8 @@
<header> <header>
<h2>Modal</h2> <h2>Modal</h2>
</header> </header>
<p><code>&lt;form&gt;</code> tags can be between the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code>, or wrap around the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> tags within the modal.</p>
<hr>
<div class="grid"> <div class="grid">
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)"> <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
Launch Demo Modal Launch Demo Modal
@ -1093,7 +1094,7 @@
<header> <header>
<h2>Modal Sizes</h2> <h2>Modal Sizes</h2>
<h6>Having different modal sizes does require a class.</h6> <h6 class="fw-n">Having different modal sizes does require a class.</h6>
</header> </header>
<p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p> <p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p>
<ul> <ul>
@ -1116,7 +1117,7 @@
<article id="popover"> <article id="popover">
<header> <header>
<h2>Popovers</h2> <h2>Popovers</h2>
<p>Popovers will replace the notifications below.</p> <h6 class="fw-n">Popovers will replace the notifications below.</h6>
</header> </header>
<button class="action" popovertarget="popover-example1">Backdrop Close</button> <button class="action" popovertarget="popover-example1">Backdrop Close</button>
@ -1639,7 +1640,7 @@
function changeTheme(newTheme) { function changeTheme(newTheme) {
const linkElement = document.getElementById('theme-color-ss'); const linkElement = document.getElementById('theme-color-ss');
if (linkElement) { 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');
} }
} }

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@yohns/picocss", "name": "@yohns/picocss",
"version": "2.2.6", "version": "2.2.7",
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.", "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
"authors": [ "authors": [
{ {

4
scss/components/_card.scss
View file

@ -6,8 +6,8 @@
* Card (<article>, role="article") * Card (<article>, role="article")
*/ */
#{$parent-selector} article:not(:has(> form)), #{$parent-selector} article:not(:has(> form:first-child)),
#{$parent-selector} [role="article"]:not(:has(> form)), #{$parent-selector} [role="article"]:not(:has(> form:first-child)),
#{$parent-selector} article > form, #{$parent-selector} article > form,
#{$parent-selector} [role="article"] > form { #{$parent-selector} [role="article"] > form {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);

36
scss/components/_modal.scss
View file

@ -11,6 +11,25 @@
#{$css-var-prefix}scrollbar-width: 0px; #{$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 { #{$parent-selector} dialog {
display: grid; display: grid;
z-index: 999; z-index: 999;
@ -37,26 +56,13 @@
} }
// Content // Content
> article:not(:has(> form)), > article:not(:has(> form:first-child)),
> article > form { > article > form:first-child {
$close-selector: if( $close-selector: if(
$enable-classes, $enable-classes,
".close, :is(a, button)[rel=prev]", ".close, :is(a, button)[rel=prev]",
":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 { > header {
> * { > * {

2
scss/helpers/_copyright.scss
View file

@ -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 * Copyright 2019-2025 - Licensed under MIT
*/ */