mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 00:35:05 -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.
```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
@ -141,7 +141,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.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
<link
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" />
<link
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>
</head>

88
docs/index.html
View file

@ -24,7 +24,7 @@
<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">
<!-- 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">
<!--
Yohn's Simple CSS Class helpers
@ -216,7 +216,7 @@
<main class="col-12 col-md-9 col-lg-10">
<article>
<header>
<h2>Yohns PicoCSS Fork v2.2.8</h2>
<h2>Yohns PicoCSS Fork v2.2.9</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
@ -230,6 +230,10 @@
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
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>
</article>
@ -531,25 +535,25 @@
</ul>
<input type="checkbox" id="menu-btn" />
<!-- 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>
<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">
<details class="dropdown">
<summary class="secondary">About</summary>
<details class="dropdown hide-arrow">
<summary class="secondary" role="button">About</summary>
<ul>
<li><a class="load-page" href="#">What’s new in v2?</a></li>
<li><a class="load-page" href="#">Mission</a></li>
<li><a class="load-page" href="#">Usage scenarios</a></li>
<li><a class="load-page" href="#">Brand</a></li>
<li><a class="load-page" href="#">Built With</a></li>
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
<li><a href="javascript:void(0);">Mission</a></li>
<li><a href="javascript:void(0);">Usage scenarios</a></li>
<li><a href="javascript:void(0);">Brand</a></li>
<li><a href="javascript:void(0);">Built With</a></li>
</ul>
</details>
</li>
<li role="listitem"><a href="#">Services</a></li>
<li role="listitem"><a href="#">Login</a></li>
<li role="listitem"><a href="#">Sign Up</a></li>
<li role="listitem"><a href="javascript:void(0);">Services</a></li>
<li role="listitem"><a href="javascript:void(0);">Login</a></li>
<li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
</ol>
</nav>
<!-- End Responsive Nav 1 -->
@ -563,29 +567,59 @@
<li><strong>Like Us on GitHub!</strong></li>
</ul>
<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>
<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">
<details class="dropdown">
<summary class="secondary">About</summary>
<details class="dropdown hide-arrow">
<summary>About 2</summary>
<ul>
<li><a class="load-page" href="#">What’s new in v2?</a></li>
<li><a class="load-page" href="#">Mission</a></li>
<li><a class="load-page" href="#">Usage scenarios</a></li>
<li><a class="load-page" href="#">Brand</a></li>
<li><a class="load-page" href="#">Built With</a></li>
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
<li><a href="javascript:void(0);">Mission</a></li>
<li><a href="javascript:void(0);">Usage scenarios</a></li>
<li><a href="javascript:void(0);">Brand</a></li>
<li><a href="javascript:void(0);">Built With</a></li>
</ul>
</details>
</li>
<li role="listitem"><a href="#">Services</a></li>
<li role="listitem"><a href="#">Login</a></li>
<li role="listitem"><a href="#">Sign Up</a></li>
<li role="listitem"><a href="javascript:void(0);">Services</a></li>
<li role="listitem"><a href="javascript:void(0);">Login</a></li>
<li role="listitem"><a href="javascript:void(0);">Sign Up</a></li>
</ol>
</nav>
<!-- End Responsive Nav 2 -->
<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>
<summary>Show the code:</summary>
<div>
@ -1596,7 +1630,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.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",
"version": "2.2.8",
"version": "2.2.9",
"description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
"authors": [
{

21
scss/components/_accordion.scss
View file

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

7
scss/components/_dropdown.scss
View file

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

2
scss/components/_group.scss
View file

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

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

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