From 19e03a348b8b17c7b1bcb984f500f3b9bd35ee11 Mon Sep 17 00:00:00 2001 From: Yohn Date: Fri, 24 Jan 2025 15:29:42 -0500 Subject: [PATCH] Closes Hamburger Menu show part of menu below Yohn/PicoCSS#49 Fixes Accordion chevron padding picocss/pico#653 Demo has been updated with new hamburger nav example. --- README.md | 8 +-- docs/index.html | 88 ++++++++++++++++++++--------- package.json | 2 +- scss/components/_accordion.scss | 21 +++++-- scss/components/_dropdown.scss | 7 +++ scss/components/_group.scss | 2 + scss/components/_nav-hamburger.scss | 34 +++++++++-- scss/helpers/_copyright.scss | 2 +- 8 files changed, 119 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 7181631e..cf51fbda 100644 --- a/README.md +++ b/README.md @@ -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 - + ``` ### Install with NPM @@ -141,7 +141,7 @@ Use the default `.classless` version if you need centered viewports: ```html ``` @@ -150,7 +150,7 @@ Or use the `.fluid.classless` version if you need a fluid container: ```html ``` @@ -165,7 +165,7 @@ Then just write pure HTML, and it should look great: Hello, world! diff --git a/docs/index.html b/docs/index.html index b796db5d..d813077d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,7 +24,7 @@ - + - @@ -563,29 +567,59 @@
  • Like Us on GitHub!
    • -
    + + +
    Show the code:
    @@ -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'); } } diff --git a/package.json b/package.json index 104769e0..6da51fe0 100644 --- a/package.json +++ b/package.json @@ -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": [ { diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 2b2b715c..59ff9ea2 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -5,19 +5,26 @@ /** * Accordion (
    ) */ - #{$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; diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index 58b3ed07..e167c664 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -265,6 +265,13 @@ // Override height margin-bottom: 0; + &.hide-arrow { + > summary::after { + display: none; + content: none; + } + } + > summary { &:not([role]) { // Override height diff --git a/scss/components/_group.scss b/scss/components/_group.scss index a9152f65..f4f2e33c 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -6,6 +6,8 @@ * Group ([role="group"], [role="search"]) */ + /* V3 Remove, modifing the placement is disabled + * in chrome.*/ #{$parent-selector} fieldset[role="group"] > legend { float: left; } diff --git a/scss/components/_nav-hamburger.scss b/scss/components/_nav-hamburger.scss index dd930bda..0f399328 100644 --- a/scss/components/_nav-hamburger.scss +++ b/scss/components/_nav-hamburger.scss @@ -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; } } } diff --git a/scss/helpers/_copyright.scss b/scss/helpers/_copyright.scss index 4367453f..1391c9c6 100644 --- a/scss/helpers/_copyright.scss +++ b/scss/helpers/_copyright.scss @@ -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 */