mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36: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

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;
}
}
}