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

Closes Hamburger Menu show part of menu below Yohn/PicoCSS#49

Browse source 
Fixes Accordion chevron padding picocss/pico#653

Demo has been updated with new hamburger nav  example.
This commit is contained in:
Yohn 2025-01-24 15:29:42 -05:00
parent 14f7865f9a
commit 19e03a348b
8 changed files with 119 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -83,7 +83,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.8/css/pico.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.min.css" />
``` ```
### Install with NPM ### Install with NPM
@ -141,7 +141,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.8/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.classless.min.css"
/> />
``` ```
@ -150,7 +150,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.8/css/pico.fluid.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.fluid.classless.min.css"
/> />
``` ```
@ -165,7 +165,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.8/css/pico.classless.min.css" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.classless.min.css"
/> />
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>

88
docs/index.html
View file

@ -24,7 +24,7 @@
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<!-- Pico.css --> <!-- Pico.css -->
<link rel="stylesheet" href="pico.min.css" id="theme-color-ss"> <link rel="stylesheet" href="pico.css" id="theme-color-ss">
<link rel="stylesheet" href="pico.colors.min.css"> <link rel="stylesheet" href="pico.colors.min.css">
<!-- <!--
Yohn's Simple CSS Class helpers Yohn's Simple CSS Class helpers
@ -216,7 +216,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.8</h2> <h2>Yohns PicoCSS Fork v2.2.9</h2>
</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
@ -230,6 +230,10 @@
href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as
the preview here. I may get a build script going to compile the javascript plugins / components later. Let the preview here. I may get a build script going to compile the javascript plugins / components later. Let
me know if this feature would help you.</p> me know if this feature would help you.</p>
<hr>
<h3>&lt;details class="hide-arrow"&gt;</h3>
<p>With classes enabled, adding the <code>hide-arrow</code> class to your <code>&lt;details class="hide-arrow"&gt;</code> will hide the arrow on the <code>&lt;summary&gt;</code> tag within the accordion and dropdown components.</p>
<footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork! <footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork!
</footer> </footer>
</article> </article>
@ -531,25 +535,25 @@
</ul> </ul>
<input type="checkbox" id="menu-btn" /> <input type="checkbox" id="menu-btn" />
<!-- role="button" --> <!-- role="button" -->
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" <label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu"
aria-controls="nav-example"> &equiv; </label> aria-controls="nav-example"> &equiv; </label>
<ol id="nav-example" role="list"> <ol id="nav-example" role="list">
<li role="listitem"><a href="#">Home</a></li> <li role="listitem"><a href="javascript:void(0);">Home</a></li>
<li role="listitem"> <li role="listitem">
<details class="dropdown"> <details class="dropdown hide-arrow">
<summary class="secondary">About</summary> <summary class="secondary" role="button">About</summary>
<ul> <ul>
<li><a class="load-page" href="#">What’s new in v2?</a></li> <li><a href="javascript:void(0);">What’s new in v2?</a></li>
<li><a class="load-page" href="#">Mission</a></li> <li><a href="javascript:void(0);">Mission</a></li>
<li><a class="load-page" href="#">Usage scenarios</a></li> <li><a href="javascript:void(0);">Usage scenarios</a></li>
<li><a class="load-page" href="#">Brand</a></li> <li><a href="javascript:void(0);">Brand</a></li>
<li><a class="load-page" href="#">Built With</a></li> <li><a href="javascript:void(0);">Built With</a></li>
</ul> </ul>
</details> </details>
</li> </li>
<li role="listitem"><a href="#">Services</a></li> <li role="listitem"><a href="javascript:void(0);">Services</a></li>
<li role="listitem"><a href="#">Login</a></li> <li role="listitem"><a href="javascript:void(0);">Login</a></li>
<li role="listitem"><a href="#">Sign Up</a></li> <li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
</ol> </ol>
</nav> </nav>
<!-- End Responsive Nav 1 --> <!-- End Responsive Nav 1 -->
@ -563,29 +567,59 @@
<li><strong>Like Us on GitHub!</strong></li> <li><strong>Like Us on GitHub!</strong></li>
</ul> </ul>
<input type="checkbox" id="menu-btn2"> <input type="checkbox" id="menu-btn2">
<label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" <label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu"
aria-controls="nav-example2"> &equiv; </label> aria-controls="nav-example2"> &equiv; </label>
<ol id="nav-example2" role="list"> <ol id="nav-example2" role="list">
<li role="listitem"><a href="#">Home</a></li> <li role="listitem"><a href="javascript:void(0);">Home</a></li>
<li role="listitem"> <li role="listitem">
<details class="dropdown"> <details class="dropdown hide-arrow">
<summary class="secondary">About</summary> <summary>About 2</summary>
<ul> <ul>
<li><a class="load-page" href="#">What’s new in v2?</a></li> <li><a href="javascript:void(0);">What’s new in v2?</a></li>
<li><a class="load-page" href="#">Mission</a></li> <li><a href="javascript:void(0);">Mission</a></li>
<li><a class="load-page" href="#">Usage scenarios</a></li> <li><a href="javascript:void(0);">Usage scenarios</a></li>
<li><a class="load-page" href="#">Brand</a></li> <li><a href="javascript:void(0);">Brand</a></li>
<li><a class="load-page" href="#">Built With</a></li> <li><a href="javascript:void(0);">Built With</a></li>
</ul> </ul>
</details> </details>
</li> </li>
<li role="listitem"><a href="#">Services</a></li> <li role="listitem"><a href="javascript:void(0);">Services</a></li>
<li role="listitem"><a href="#">Login</a></li> <li role="listitem"><a href="javascript:void(0);">Login</a></li>
<li role="listitem"><a href="#">Sign Up</a></li> <li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
</ol> </ol>
</nav> </nav>
<!-- End Responsive Nav 2 --> <!-- End Responsive Nav 2 -->
<hr> <hr>
<!-- Start Responsive Nav 3 -->
<nav class="container-fluid" role="navigation" data-position="end" data-breakpoint="lg">
<input type="checkbox" id="hamburger3">
<label for="hamburger3" style="font-size: calc(var(--pico-font-size) * 2);" aria-label="Menu" aria-controls="top-nav">&equiv;</label>
<ul id="top-nav" role="list">
<li role="listitem"><a href="javascript:void(0);">Pico CSS</a></li>
<li role="listitem"><a href="javascript:void(0);">Example</a></li>
<li role="listitem">
<details class="dropdown hide-arrow">
<summary>Submenu</summary>
<ul>
<li><a href="javascript:void(0);">Another Link</a></li>
<li><a href="javascript:void(0);">And Again</a></li>
</ul>
</details>
</li>
<li role="listitem"><a href="javascript:void(0);">Final In List</a></li>
</ul>
<ul></ul> <!-- put empty <ul> or <ol> element here to move the next <ul> or <ol> to the right -->
<ul>
<li>
<form role="search" action="javascript:void(0);" method="get">
<input name="search" type="search" value="" placeholder="Find this Article">
<input type="hidden" name="id" value="12">
<input type="submit" value="Find">
</form>
</li>
</ul>
</nav>
<hr>
<details> <details>
<summary>Show the code:</summary> <summary>Show the code:</summary>
<div> <div>
@ -1596,7 +1630,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.8/css/pico.' + newTheme + '.min.css'); linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.9/css/pico.' + newTheme + '.min.css');
} }
} }

2
package.json
View file

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

21
scss/components/_accordion.scss
View file

@ -5,19 +5,26 @@
/** /**
* Accordion (<details>) * Accordion (<details>)
*/ */
#{$parent-selector} details { #{$parent-selector} details {
display: block; display: block;
margin-bottom: var(#{$css-var-prefix}spacing); margin-bottom: var(#{$css-var-prefix}spacing);
@if $enable-classes {
&.hide-arrow > summary::after {
display: none;
content: none;
}
}
summary { summary {
position: relative;
padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
line-height: 1rem; line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
//@if $enable-transitions {
@if $enable-transitions { //transition: color var(#{$css-var-prefix}transition);
//transition: color var(#{$css-var-prefix}transition); //}
}
&:not([role]) { &:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color); color: var(#{$css-var-prefix}accordion-close-summary-color);
@ -39,10 +46,12 @@
// Marker // Marker
&::after { &::after {
display: block; display: block;
position: absolute;
top: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5);
right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * 0.5);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5); margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron); background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center; background-position: right center;

7
scss/components/_dropdown.scss
View file

@ -265,6 +265,13 @@
// Override height // Override height
margin-bottom: 0; margin-bottom: 0;
&.hide-arrow {
> summary::after {
display: none;
content: none;
}
}
> summary { > summary {
&:not([role]) { &:not([role]) {
// Override height // Override height

2
scss/components/_group.scss
View file

@ -6,6 +6,8 @@
* Group ([role="group"], [role="search"]) * Group ([role="group"], [role="search"])
*/ */
/* V3 Remove, modifing the <legend> placement is disabled
* in chrome.*/
#{$parent-selector} fieldset[role="group"] > legend { #{$parent-selector} fieldset[role="group"] > legend {
float: left; float: left;
} }

34
scss/components/_nav-hamburger.scss
View file

@ -10,7 +10,7 @@
*/ */
#{$parent-selector} nav[role="navigation"] { #{$parent-selector} nav[role="navigation"] {
z-index: 1; z-index: 1;
align-items: center; //align-items: center; // the label for the burger was bouncing
width: 100%; width: 100%;
overflow: visible; overflow: visible;
@ -29,6 +29,12 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
> ul,
> ol {
> li > [role="search"] {
margin-block-end: 0;
}
}
} }
@each $breakpoint, $values in $breakpoints { @each $breakpoint, $values in $breakpoints {
@ -51,6 +57,7 @@
display: block; display: block;
} }
> [role="list"] { > [role="list"] {
display: none;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 90vw; width: 90vw;
@ -58,21 +65,34 @@
margin: 0 auto; margin: 0 auto;
background-color: var(#{$css-var-prefix}muted-border-color); //muted-border-color); background-color: var(#{$css-var-prefix}muted-border-color); //muted-border-color);
box-shadow: var(#{$css-var-prefix}box-shadow); box-shadow: var(#{$css-var-prefix}box-shadow);
transition: max-height var(#{$css-var-prefix}transition); opacity: 0;
@if $enable-transitions {
transition:
max-height var(#{$css-var-prefix}transition),
opacity var(#{$css-var-prefix}transition);
}
li { li {
width: calc(100% - calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)); width: calc(100% - calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2));
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 0.5) margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-link-spacing-vertical); var(#{$css-var-prefix}nav-link-spacing-vertical);
padding: 0; padding: 0;
> details.dropdown {
width: 100%;
}
> form[role="search"] {
margin-block-end: 0;
}
} }
a { a {
display: block; display: block;
margin: 0; margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0; border-radius: 0;
transition: border-block-end: 1px solid transparent;
border-color var(#{$css-var-prefix}transition), @if $enable-transitions {
color var(#{$css-var-prefix}transition); transition:
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition);
}
} }
a:hover { a:hover {
border-bottom-color: var(#{$css-var-prefix}underline); border-bottom-color: var(#{$css-var-prefix}underline);
@ -82,7 +102,9 @@
} }
} }
input[type="checkbox"]:checked ~ [role="list"] { input[type="checkbox"]:checked ~ [role="list"] {
display: block;
max-height: 100vh; max-height: 100vh;
opacity: 1;
} }
} }
} }

2
scss/helpers/_copyright.scss
View file

@ -1,4 +1,4 @@
/*! /*!
* Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS) * Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2025 - Licensed under MIT * Copyright 2019-2025 - Licensed under MIT
*/ */