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

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.
```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
@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
```html
<link
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
<link
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" />
<link
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>
</head>

11
docs/index.html
View file

@ -224,8 +224,7 @@
<main class="col-12 col-md-9 col-lg-10">
<article>
<header>
<h2>Yohns PicoCSS Fork v2.2.6</h2>
<p class="mb-0">Not in npm yet, but will be soon.</p>
<h2>Yohns PicoCSS Fork v2.2.7</h2>
</header>
<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
@ -1080,6 +1079,8 @@
<header>
<h2>Modal</h2>
</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">
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
Launch Demo Modal
@ -1093,7 +1094,7 @@
<header>
<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>
<p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p>
<ul>
@ -1116,7 +1117,7 @@
<article id="popover">
<header>
<h2>Popovers</h2>
<p>Popovers will replace the notifications below.</p>
<h6 class="fw-n">Popovers will replace the notifications below.</h6>
</header>
<button class="action" popovertarget="popover-example1">Backdrop Close</button>
@ -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');
}
}

2
package.json
View file

@ -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": [
{

4
scss/components/_card.scss
View file

@ -6,8 +6,8 @@
* Card (<article>, 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);

36
scss/components/_modal.scss
View file

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

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
*/