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

refactor(nav): Add css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-02-27 14:41:34 +07:00
parent a018211b14
commit 894ce64795
30 changed files with 172 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

31
scss/components/_nav.scss
View file

@ -19,29 +19,28 @@ nav {
list-style: none;
&:first-of-type {
margin-left: calc(var(--spacing) * -0.5);
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5);
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
a {
display: block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
display: inline-block;
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,11 +62,15 @@ aside {
}
li {
padding: calc(var(--spacing) * 0.5);
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
a {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}

6
scss/themes/default/_styles.scss
View file

@ -59,6 +59,12 @@
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Spacings for nav component
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
// Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight);