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

Merge pull request #45 from Yohn/Modal-forms

Browse source 
Modal sizes and styling with form child
This commit is contained in:
JWB 2025-01-18 19:39:42 -05:00 • committed by GitHub
commit 35dff83b3b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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
*/ */