Skip to content

Commit 869da59

Browse files
YohnYohn
committed
updated accordian and dropdown to not overlap the arrow, provide enough space for the arrow, and keep the arrow at the top when theres multi-lines for the sumary text.
Reverted back the container padding.
1 parent e8bfb76 commit 869da59

File tree

4 files changed

+37
-23
lines changed

4 files changed

+37
-23
lines changed

‎docs/index.html

+12-3
Original file line numberDiff line numberDiff line change
@@ -542,7 +542,7 @@ <h6>(resize width of screen if you don't see it)</h6>
542542
<ol id="nav-example" role="list">
543543
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
544544
<li role="listitem">
545-
<details class="dropdown hide-arrow">
545+
<details class="dropdown">
546546
<summary class="secondary" role="button">About</summary>
547547
<ul>
548548
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
@@ -574,7 +574,7 @@ <h3>Hamburger Menu Under Nav Example</h3>
574574
<ol id="nav-example2" role="list">
575575
<li role="listitem"><a href="javascript:void(0);">Home</a></li>
576576
<li role="listitem">
577-
<details class="dropdown hide-arrow">
577+
<details class="dropdown">
578578
<summary>About 2</summary>
579579
<ul>
580580
<li><a href="javascript:void(0);">What’s new in v2?</a></li>
@@ -600,11 +600,20 @@ <h3>Hamburger Menu Under Nav Example</h3>
600600
<li role="listitem"><a href="javascript:void(0);">Pico CSS</a></li>
601601
<li role="listitem"><a href="javascript:void(0);">Example</a></li>
602602
<li role="listitem">
603-
<details class="dropdown hide-arrow">
603+
<details class="dropdown">
604604
<summary>Submenu</summary>
605605
<ul>
606606
<li><a href="javascript:void(0);">Another Link</a></li>
607607
<li><a href="javascript:void(0);">And Again</a></li>
608+
<li>
609+
<details class="dropdown">
610+
<summary>Another Submenu</summary>
611+
<ul>
612+
<li><a href="javascript:void(0);">Another Link</a></li>
613+
<li><a href="javascript:void(0);">And Again</a></li>
614+
</ul>
615+
</details>
616+
</li>
608617
</ul>
609618
</details>
610619
</li>

‎scss/components/_accordion.scss

+8-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88
#{$parent-selector} details {
99
display: block;
10-
margin-bottom: var(#{$css-var-prefix}spacing);
10+
margin-block-end: var(#{$css-var-prefix}spacing);
1111

1212
@if $enable-classes {
1313
&.hide-arrow > summary::after {
@@ -16,9 +16,13 @@
1616
}
1717
}
1818

19+
&:not(.hide-arrow) > summary {
20+
padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
21+
}
22+
1923
summary {
2024
position: relative;
21-
padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
25+
//padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
2226
line-height: 1rem;
2327
list-style-type: none;
2428
cursor: pointer;
@@ -91,13 +95,11 @@
9195
}
9296
}
9397
}
94-
//!
95-
//!
96-
//!
98+
9799
// Open
98100
&[open] {
99101
> summary {
100-
margin-bottom: var(#{$css-var-prefix}spacing);
102+
margin-block-end: var(#{$css-var-prefix}spacing);
101103

102104
&:not([role]) {
103105
&:not(:focus) {

‎scss/components/_dropdown.scss

+12-8
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
min-width: 200px;
139139
min-width: fit-content;
140140
margin: 0;
141-
margin-top: var(#{$css-var-prefix}outline-width);
141+
margin-block-start: var(#{$css-var-prefix}outline-width);
142142
padding: 0;
143143
border: var(#{$css-var-prefix}border-width)
144144
solid
@@ -163,22 +163,22 @@
163163

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

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

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

179179
details {
180180
width: 100%;
181-
margin-bottom: 0;
181+
margin-block-end: 0;
182182
> summary {
183183
line-height: var(#{$css-var-prefix}line-height);
184184
}
@@ -224,7 +224,7 @@
224224
// Button opened
225225
// inside container type accordion
226226
// ––––––––––––––––––––
227-
margin-bottom: 0;
227+
margin-block-end: 0;
228228

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

268268
&.hide-arrow {
269269
> summary::after {
@@ -294,11 +294,15 @@
294294
}
295295
}
296296
}
297+
298+
&:not(.hide-arrow) > summary {
299+
padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
300+
}
297301
}
298302

299303
// Label
300304
// ––––––––––––––––––––
301305
#{$parent-selector} label > details.dropdown {
302-
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
306+
margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
303307
}
304308
}

‎scss/layout/_container.scss

+5-6
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,15 @@
1414
}
1515

1616
#{$parent-selector} .container {
17-
//$first-breakpoint: true;
17+
$first-breakpoint: true;
1818
@each $key, $values in $breakpoints {
1919
@if $values {
2020
@media (min-width: map.get($values, "breakpoint")) {
2121
max-width: map.get($values, "viewport");
22-
//@if $first-breakpoint {
23-
// $first-breakpoint: false;
24-
// padding-right: 0;
25-
// padding-left: 0;
26-
//}
22+
@if $first-breakpoint {
23+
$first-breakpoint: false;
24+
padding-inline: 0;
25+
}
2726
}
2827
}
2928
}

0 commit comments

Comments
 (0)