mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source 
Reverted back the container padding.
This commit is contained in:
Yohn 2025-02-05 21:22:40 -05:00
parent e8bfb763ff
commit 869da59717
4 changed files with 37 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

14
scss/components/_accordion.scss
View file

@ -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 {
@ -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;
@ -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) {

20
scss/components/_dropdown.scss
View file

@ -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
@ -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);
}
@ -224,7 +224,7 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
margin-bottom: 0;
margin-block-end: 0;
// Close for dropdown
// inside container type accordion
@ -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 {
@ -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);
}
}