mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -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

36
docs/css/pico.docs.css
View file

@ -102,6 +102,7 @@ main > aside nav {
}
}
main > aside nav a#toggle-docs-navigation {
display: block;
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
@ -140,8 +141,12 @@ main > aside summary {
padding-bottom: 0;
font-size: 16px;
}
main > aside ul {
padding-left: 0.25rem;
}
main > aside li a {
padding: 0.375rem 0.5rem;
--nav-link-spacing-vertical: 0.25rem;
--nav-link-spacing-horizontal: 0.75rem;
}
main > aside li a svg {
vertical-align: middle;
@ -167,7 +172,7 @@ main > aside details summary::after {
display: none;
}
main > aside details[open] > summary {
margin-bottom: calc(var(--spacing) * 0.75);
margin-bottom: 0;
}
main > aside details[open] > summary:not(:focus) {
color: var(--h1-color);
@ -266,6 +271,10 @@ main > aside details[open] > summary:not(:focus) {
vertical-align: bottom;
}
#buttons a[role=button] {
margin-right: calc(var(--spacing) * 0.5);
}
#forms div.grid {
grid-row-gap: 0;
}
@ -285,11 +294,6 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] section > h1,
[role=document] section > h2,
[role=document] section > h3 {
@ -390,6 +394,9 @@ dialog.example:not([open]), dialog.example[open=false] {
* Docs: Navs
*/
body > nav {
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 1rem;
--nav-link-spacing-horizontal: 0.75rem;
-webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 99;
position: fixed;
@ -409,20 +416,27 @@ body > nav a {
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
body > nav ul:first-of-type {
margin-left: calc(var(--spacing) * -1);
}
body > nav ul:first-of-type li {
padding: 0;
}
body > nav ul:first-of-type li:first-of-type a {
display: block;
margin: 0;
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
margin-left: calc(var(--spacing) * 1.5);
color: var(--h1-color);
}
@media (min-width: 992px) {