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);
--form-element-spacing-vertical: 0.75rem;
--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);
--transition: 0.2s ease-in-out;
}
@ -1948,25 +1952,24 @@ nav ul {
}
nav ol: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 ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
nav li {
display: inline-block;
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 > input:not([type=checkbox]):not([type=radio]) {
margin-bottom: 0;
nav li > * {
--spacing: 0;
}
nav 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;
}
@ -1981,11 +1984,13 @@ aside li {
display: block;
}
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 {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
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);
--form-element-spacing-vertical: 0.75rem;
--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);
--transition: 0.2s ease-in-out;
}
@ -2222,25 +2226,24 @@ nav ul {
}
nav ol: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 ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
nav li {
display: inline-block;
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 > input:not([type=checkbox]):not([type=radio]) {
margin-bottom: 0;
nav li > * {
--spacing: 0;
}
nav 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;
}
@ -2255,11 +2258,13 @@ aside li {
display: block;
}
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 {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
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);
--form-element-spacing-vertical: 0.75rem;
--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);
--transition: 0.2s ease-in-out;
}
@ -1918,25 +1922,24 @@ nav ul {
}
nav ol: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 ul:last-of-type {
margin-right: calc(var(--spacing) * -0.5);
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
nav li {
display: inline-block;
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 > input:not([type=checkbox]):not([type=radio]) {
margin-bottom: 0;
nav li > * {
--spacing: 0;
}
nav 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;
}
@ -1951,11 +1954,13 @@ aside li {
display: block;
}
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 {
margin: calc(var(--spacing) * -0.5);
padding: calc(var(--spacing) * 0.5);
display: block;
}
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);
--form-element-spacing-vertical: 0.75rem;
--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);
--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);
--form-element-spacing-vertical: 0.75rem;
--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);
--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 {
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

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

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;
@ -65,7 +66,6 @@ main > aside {
}
}
li,
summary {
padding-top: 0;
@ -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;

29
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);
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
// HACK: Input & Button inside Nav
> *,
> input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
// 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);