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

29
css/pico.classless.css
View file

@ -21,6 +21,10 @@
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@ -1948,25 +1952,24 @@ nav ul {
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--spacing) * -0.5); margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5); margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
} }
nav li > *, nav li > * {
nav li > input:not([type=checkbox]):not([type=radio]) { --spacing: 0;
margin-bottom: 0;
} }
nav a { nav a {
display: block; display: inline-block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; text-decoration: none;
} }
@ -1981,11 +1984,13 @@ aside li {
display: block; display: block;
} }
aside li { aside li {
padding: calc(var(--spacing) * 0.5); padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
} }
aside li a { aside li a {
margin: calc(var(--spacing) * -0.5); display: block;
padding: calc(var(--spacing) * 0.5); }
aside li [role=button] {
margin: inherit;
} }
/** /**

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

29
css/pico.css
View file

@ -23,6 +23,10 @@
--grid-spacing-horizontal: var(--spacing); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@ -2222,25 +2226,24 @@ nav ul {
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--spacing) * -0.5); margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5); margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
} }
nav li > *, nav li > * {
nav li > input:not([type=checkbox]):not([type=radio]) { --spacing: 0;
margin-bottom: 0;
} }
nav a { nav a {
display: block; display: inline-block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; text-decoration: none;
} }
@ -2255,11 +2258,13 @@ aside li {
display: block; display: block;
} }
aside li { aside li {
padding: calc(var(--spacing) * 0.5); padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
} }
aside li a { aside li a {
margin: calc(var(--spacing) * -0.5); display: block;
padding: calc(var(--spacing) * 0.5); }
aside li [role=button] {
margin: inherit;
} }
/** /**

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

29
css/pico.fluid.classless.css
View file

@ -21,6 +21,10 @@
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }
@ -1918,25 +1922,24 @@ nav ul {
} }
nav ol:first-of-type, nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: calc(var(--spacing) * -0.5); margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav ol:last-of-type, nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5); margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
} }
nav li { nav li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
} }
nav li > *, nav li > * {
nav li > input:not([type=checkbox]):not([type=radio]) { --spacing: 0;
margin-bottom: 0;
} }
nav a { nav a {
display: block; display: inline-block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; text-decoration: none;
} }
@ -1951,11 +1954,13 @@ aside li {
display: block; display: block;
} }
aside li { aside li {
padding: calc(var(--spacing) * 0.5); padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
} }
aside li a { aside li a {
margin: calc(var(--spacing) * -0.5); display: block;
padding: calc(var(--spacing) * 0.5); }
aside li [role=button] {
margin: inherit;
} }
/** /**

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
css/pico.slim.css
View file

@ -26,6 +26,10 @@
--grid-spacing-horizontal: var(--spacing); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
css/themes/default.css
View file

@ -19,6 +19,10 @@
--grid-spacing-horizontal: var(--spacing); --grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.75rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
} }

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

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

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

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

@ -10,11 +10,6 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2); 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"] { [role="document"] {
section > h1, section > h1,
section > h2, section > h2,

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

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

31
scss/components/_nav.scss
View file

@ -19,29 +19,28 @@ nav {
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(--spacing) * -0.5); margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(--spacing) * -0.5); margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
} }
} }
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
// HACK: Input & Button inside Nav // Minimal support for buttons and forms elements
> *, > * {
> input:not([type="checkbox"]):not([type="radio"]) { --spacing: 0;
margin-bottom: 0;
} }
} }
a { a {
display: block; display: inline-block;
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--spacing) calc(var(--spacing) * 0.5); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration: none; text-decoration: none;
@ -63,11 +62,15 @@ aside {
} }
li { li {
padding: calc(var(--spacing) * 0.5); padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
a { a {
margin: calc(var(--spacing) * -0.5); display: block;
padding: calc(var(--spacing) * 0.5); }
// 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-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --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 // Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);