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

Merge branch 'master' into dev

Browse source
This commit is contained in:
Lucas Larroche 2021-12-19 09:50:15 +07:00
commit 6a6d67dbab
83 changed files with 1825 additions and 2353 deletions
Download patch file Download diff file Expand all files Collapse all files

34
docs/scss/components/_modal.scss
View file

@ -1,34 +0,0 @@
/**
* Docs: Modal
*/
dialog.example {
display: block;
z-index: inherit;
position: relative;
top: inherit;
right: inherit;
bottom: inherit;
left: inherit;
align-items: inherit;
justify-content: inherit;
width: inherit;
min-width: inherit;
height: inherit;
min-height: inherit;
padding: 0;
background-color:inherit;
article {
max-width: inherit;
}
&:not([open]),
&[open=false] {
display: none;
}
}
.dialog-is-open body > button {
filter: blur(0.125rem);
}

4
docs/scss/components/_theme-switcher.scss
View file

@ -26,8 +26,8 @@
currentColor 50%,
transparent 50%
);
content: "";
vertical-align: bottom;
content: "";
transition: transform var(--transition);
}
@ -36,8 +36,8 @@
max-width: 0;
padding: 0;
overflow: hidden;
font-style: normal;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}

4
docs/scss/content/_code.scss
View file

@ -8,17 +8,17 @@ article > footer.code {
}
article pre,
article pre code {
margin-bottom: 0;
background: transparent;
margin-bottom: 0;
}
// Code block outside article
// Horizontally aligned with <article> content
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5)
var(--block-spacing-horizontal);
background: var(--article-code-background-color);
box-shadow: var(--card-box-shadow);
}

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

@ -2,10 +2,6 @@
* Docs: Typography
*/
h1 {
margin-top: -0.25em;
}
section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}

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

@ -3,11 +3,14 @@
*/
main > aside {
nav {
width: 100%;
margin-bottom: calc(var(--block-spacing-vertical) * 2);
margin-bottom: var(--block-spacing-vertical);
h1 {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: map-get($breakpoints, "lg")) {
position: fixed;
width: 200px;
@ -15,58 +18,12 @@ main > aside {
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
a#toggle-docs-navigation {
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
svg {
margin-right: calc(var(--spacing) * 0.5);
vertical-align: -3px;
}
@media (min-width: map-get($breakpoints, "lg")) {
h1 {
display: none;
}
}
&.closed-on-mobile {
margin-bottom: var(--block-spacing-vertical);
a#toggle-docs-navigation {
svg.collapse {
display: none;
}
}
details {
display: none;
}
@media (min-width: map-get($breakpoints, "lg")) {
details {
display: block;
}
> a#toggle-docs-navigation {
display: none;
}
}
}
&.open {
a#toggle-docs-navigation {
svg.expand {
display: none;
}
}
}
}
li,
summary {
@ -76,7 +33,7 @@ main > aside {
}
li a {
padding: 0.375rem 0.5rem;
padding: 0.25rem 0.5rem;
svg {
vertical-align: middle;
@ -94,12 +51,13 @@ main > aside {
}
details {
padding-bottom: 0.25rem;
border-bottom: none;
summary {
color: var(--h1-color);
font-weight: 300;
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
&::after {
@ -108,12 +66,8 @@ main > aside {
}
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.75);
&:not(:focus) {
color: var(--h1-color);
}
> summary:not(:focus) {
color: var(--h1-color);
}
}
}

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

@ -4,14 +4,8 @@
// Docs: Themes
#themes {
button.theme-switcher {
&:first-of-type {
--font-weight: bold;
}
i {
font-style: normal;
}
button i {
font-style: normal;
}
}
@ -19,14 +13,14 @@
#customization {
figure {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(2, 1fr);
margin-bottom: 0;
overflow: hidden;
@media (min-width: map-get($breakpoints, "sm")) {
grid-template-rows: 1fr;
grid-template-columns: repeat(18, 1fr);
grid-template-rows: 1fr;
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
@ -51,8 +45,8 @@
&.picked {
background-image: var(--icon-check);
background-position: center;
background-size: 0.66rem auto;
background-repeat: no-repeat;
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
&[data-color="lime"],
@ -74,8 +68,8 @@
}
}
// Docs: Grid
#grid {
// Docs: Grids
#grids {
--grid-spacing-vertical: 1rem;
button {
@ -121,10 +115,3 @@
#forms div.grid {
grid-row-gap: 0;
}
// Docs: Modal
#modal {
button {
--font-weight: bold;
}
}

40
docs/scss/layout/_main.scss
View file

@ -12,7 +12,7 @@ body > main {
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
display: grid;
grid-template-columns: 200px auto;
}
@ -30,6 +30,42 @@ body > main {
}
}
// Anchors hacks for internal links
div[role="document"] > section::before {
display: block;
height: calc(2rem + #{$navHeight} - 0.5rem);
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
content: "";
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - 0.5rem);
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - 0.5rem);
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
}
}
}
// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
{
@ -38,8 +74,8 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-size: 0.66rem auto;
background-repeat: no-repeat;
background-size: 0.66rem auto;
content: "";
}

1
docs/scss/pico.docs.scss
View file

@ -19,6 +19,5 @@
@import "content/code";
// Components
@import "components/modal";
@import "components/nav";
@import "components/theme-switcher";