Skip to content

Modal sizes and styling with form child #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yohn merged 1 commit into from
Jan 19, 2025
Merged

Modal sizes and styling with form child #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
/>
```

Expand All @@ -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"
/>
```

Expand All @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -1080,6 +1079,8 @@ <h2><code> -md- </code> Breakpoints</h2>
<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
Expand All @@ -1093,7 +1094,7 @@ <h2>Modal</h2>

<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>
Expand All @@ -1116,7 +1117,7 @@ <h6>Having different modal sizes does require a class.</h6>
<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>
Expand Down Expand Up @@ -1639,7 +1640,7 @@ <h3>Modal with a Form!</h3>
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');
}
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": [
{
Expand Down
4 changes: 2 additions & 2 deletions scss/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
36 changes: 21 additions & 15 deletions scss/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
> * {
Expand Down
2 changes: 1 addition & 1 deletion scss/helpers/_copyright.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
*/