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

style(dropdowns)

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 09:37:03 +07:00
parent 667c94951a
commit 9a0db7ab7f
22 changed files with 300 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

11
scss/components/_accordion.scss
View file

@ -9,12 +9,11 @@ details {
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role="button"]) {
&:not([role]) {
color: var(--accordion-close-summary-color);
}
@ -65,7 +64,7 @@ details {
&[role="button"] {
width: 100%;
text-align: left;
// Marker
&::after {
height: calc(1rem * var(--line-height));
@ -73,10 +72,8 @@ details {
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(--icon-chevron-button-inverse);
@ -91,7 +88,7 @@ details {
> summary {
margin-bottom: calc(var(--spacing));
&:not([role="button"]) {
&:not([role]) {
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
@ -99,7 +96,7 @@ details {
&::after {
transform: rotate(0);
}
}
}
}
}

39
scss/components/_dropdown.scss
View file

@ -2,7 +2,7 @@
* Dropdown ([role="list"])
*/
// Menu
// Menu
details[role="list"],
li[role="list"] {
position: relative;
@ -86,7 +86,7 @@ details[role="list"] {
summary {
margin-bottom: 0;
&:not([role="button"]) {
&:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
@ -122,7 +122,7 @@ details[role="list"] {
&[open] summary {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
&::before {
display: block;
z-index: 1;
@ -140,11 +140,12 @@ details[role="list"] {
// All Dropdowns inside <nav>
nav [role="list"] {
summary, a {
summary,
a {
display: flex;
direction: ltr;
}
summary + ul,
> ul {
min-width: fit-content;
@ -158,18 +159,34 @@ nav [role="list"] {
// Dropdowns inside <nav> as nested <details>
nav [role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: 2px;
margin-top: var(--outline-width);
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
}
}
// Dropdowns inside a <nav> without using <details>
li[role="list"] {
// Open on hover (for mobile)
// Open on hover (for mobile)
// or on active/focus (for keyboard navigation)
&:hover > ul,
a:active ~ ul,
@ -179,8 +196,10 @@ li[role="list"] {
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
> a::after {

16
scss/components/_nav.scss
View file

@ -29,17 +29,20 @@ nav {
li {
display: inline-block;
margin: 0;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
a {
a,
[role="link"] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
@ -63,12 +66,13 @@ aside {
}
li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;

3
scss/content/_typography.scss
View file

@ -68,7 +68,8 @@ ul {
// Links
// 1. Remove the gray background on active links in IE 10
a {
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
outline: none;