Skip to content

Commit

Permalink
updated accordian and dropdown to not overlap the arrow, provide enou…
Browse files Browse the repository at this point in the history 
…gh space for the arrow, and keep the arrow at the top when theres multi-lines for the sumary text.

Reverted back the container padding.
  • Loading branch information
@Yohn
Yohn committed Feb 6, 2025
1 parent e8bfb76 commit 869da59
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 23 deletions.
15 changes: 12 additions & 3 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ <h6>(resize width of screen if you don't see it)</h6>
<ol id="nav-example" role="list">
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
<li role="listitem">
<details class="dropdown hide-arrow">
<details class="dropdown">
<summary class="secondary" role="button">About</summary>
<ul>
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
Expand Down Expand Up @@ -574,7 +574,7 @@ <h3>Hamburger Menu Under Nav Example</h3>
<ol id="nav-example2" role="list">
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
<li role="listitem">
<details class="dropdown hide-arrow">
<details class="dropdown">
<summary>About 2</summary>
<ul>
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
Expand All @@ -600,11 +600,20 @@ <h3>Hamburger Menu Under Nav Example</h3>
<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">
<details class="dropdown">
<summary>Submenu</summary>
<ul>
<li><a href="javascript:void(0);">Another Link</a></li>
<li><a href="javascript:void(0);">And Again</a></li>
<li>
<details class="dropdown">
<summary>Another 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>
</ul>
</details>
</li>
Expand Down
14 changes: 8 additions & 6 deletions scss/components/_accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/
#{$parent-selector} details {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);

@if $enable-classes {
&.hide-arrow > summary::after {
Expand All @@ -16,9 +16,13 @@
}
}

&:not(.hide-arrow) > summary {
padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
}

summary {
position: relative;
padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
//padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
line-height: 1rem;
list-style-type: none;
cursor: pointer;
Expand Down Expand Up @@ -91,13 +95,11 @@
}
}
}
//!
//!
//!

// Open
&[open] {
> summary {
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);

&:not([role]) {
&:not(:focus) {
Expand Down
20 changes: 12 additions & 8 deletions scss/components/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
min-width: 200px;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
margin-block-start: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width)
solid
Expand All @@ -163,22 +163,22 @@

li {
width: 100%;
margin-bottom: 0;
margin-block-end: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;

&:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}

&:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}

details {
width: 100%;
margin-bottom: 0;
margin-block-end: 0;
> summary {
line-height: var(#{$css-var-prefix}line-height);
}
Expand Down Expand Up @@ -224,7 +224,7 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
margin-bottom: 0;
margin-block-end: 0;

// Close for dropdown
// inside container type accordion
Expand Down Expand Up @@ -263,7 +263,7 @@
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
// Override height
margin-bottom: 0;
margin-block-end: 0;

&.hide-arrow {
> summary::after {
Expand Down Expand Up @@ -294,11 +294,15 @@
}
}
}

&:not(.hide-arrow) > summary {
padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
}
}

// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
11 changes: 5 additions & 6 deletions scss/layout/_container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,15 @@
}

#{$parent-selector} .container {
//$first-breakpoint: true;
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
//@if $first-breakpoint {
// $first-breakpoint: false;
// padding-right: 0;
// padding-left: 0;
//}
@if $first-breakpoint {
$first-breakpoint: false;
padding-inline: 0;

This comment has been minimized.

Sign in to view

Copy link
@Leftium

Leftium Feb 11, 2025

Was this padding set to 0 accidentally? I think all the viewports should have padding.

  • Otherwise there is no space between the background and .container.
  • While it looks OK with the default colors, if the body background color is changed it looks very crowded.

See my comments:

This comment has been minimized.

Sign in to view

Copy link
@Yohn

Yohn Feb 12, 2025

Author Owner

Yeah, I put it back to 0 because previous versions had padding left and right value as 0 - padding-inline is the left and right property.

I do agree with you though, that there should be some padding on all the containers which I'll be adding for the 2.3.* versions. Thanks for reminding me!

I'm working on a new docs layout for 2.3 which will be done soon -- I got most of it done last night, and will be trying to finish it up tonight 😉

This comment has been minimized.

Sign in to view

Copy link
@Leftium

Leftium Feb 12, 2025

I think if you add padding and widen the viewports (max-width) by the same amount it will:

  • remain visually the same if the body background is the same color
  • only adding "new" space if the background is a different color
  • because: the new padding is being traded for some of the "margin" that already exists between max-width and min-width of each breakpoint.

Would increasing the max-width affect anything else?

Either way, I can continue to work-around this by overriding .container's padding in my own CSS.
}
}
}
}
Expand Down

0 comments on commit 869da59

Please sign in to comment.