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

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

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

54
docs/scss/components/_nav.scss
View file

@ -3,6 +3,9 @@
*/
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;
@ -26,31 +29,38 @@ body > nav {
}
// Band & Title
ul:first-of-type li {
// Brand
&:first-of-type {
a {
width: 3.5rem;
height: 3.5rem;
margin-left: calc(var(--spacing) * -1);
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
ul:first-of-type {
margin-left: calc(var(--spacing) * -1);
svg {
height: 3.5rem;
li {
padding: 0;
// Brand
&:first-of-type {
a {
display: block;
margin: 0;
padding: 0;
background: var(--h1-color);
color: var(--nav-logo-color);
svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
}
}
}
// Title
&:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;
// Title
&:nth-of-type(2) {
display: none;
margin-left: calc(var(--spacing) * 1.5);
color: var(--h1-color);
@media (min-width: map-get($breakpoints, "lg")) {
display: inline;
}
}
}
}

5
docs/scss/content/_typography.scss
View file

@ -10,11 +10,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,
section > h2,

11
docs/scss/layout/_aside.scss
View file

@ -17,6 +17,7 @@ main > aside {
}
a#toggle-docs-navigation {
display: block;
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
@ -64,7 +65,6 @@ main > aside {
}
}
}
li,
summary {
@ -73,8 +73,13 @@ main > aside {
font-size: 16px;
}
ul {
padding-left: 0.25rem;
}
li a {
padding: 0.375rem 0.5rem;
--nav-link-spacing-vertical: 0.25rem;
--nav-link-spacing-horizontal: 0.75rem;
svg {
vertical-align: middle;
@ -107,7 +112,7 @@ main > aside {
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.75);
margin-bottom: 0;
&:not(:focus) {
color: var(--h1-color);

7
docs/scss/layout/_documentation.scss
View file

@ -117,6 +117,13 @@
}
}
// Docs: Buttons
#buttons {
a[role="button"] {
margin-right: calc(var(--spacing) * 0.5);
}
}
// Docs: Forms
#forms div.grid {
grid-row-gap: 0;