mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Merge branch 'master' into dev
This commit is contained in:
Lucas Larroche
commit
6a6d67dbab
83 changed files with 1825 additions and 2353 deletions
|
|
@ -55,7 +55,7 @@ body > main {
|
|||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
--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;
|
||||
}
|
||||
|
|
@ -70,14 +70,45 @@ body > main div[role=document] {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
div[role=document] > section::before {
|
||||
display: block;
|
||||
height: calc(2rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
||||
content: "";
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(2.5rem + 3.5rem - 0.5rem);
|
||||
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3.5rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(4rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
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: "";
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +121,10 @@ svg {
|
|||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
main > aside nav h1 {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav {
|
||||
|
|
@ -101,43 +135,10 @@ main > aside nav {
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
main > aside nav 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);
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation svg {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
vertical-align: -3px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
main > aside nav h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.closed-on-mobile {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: block;
|
||||
}
|
||||
main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.open a#toggle-docs-navigation svg.expand {
|
||||
display: none;
|
||||
}
|
||||
main > aside li,
|
||||
main > aside summary {
|
||||
padding-top: 0;
|
||||
|
|
@ -145,7 +146,7 @@ main > aside summary {
|
|||
font-size: 16px;
|
||||
}
|
||||
main > aside li a {
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
main > aside li a svg {
|
||||
vertical-align: middle;
|
||||
|
|
@ -159,20 +160,18 @@ main > aside a.active:hover {
|
|||
color: var(--primary);
|
||||
}
|
||||
main > aside details {
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
main > aside details summary {
|
||||
color: var(--h1-color);
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
main > aside details summary::after {
|
||||
display: none;
|
||||
}
|
||||
main > aside details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
main > aside details[open] > summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
|
@ -180,24 +179,21 @@ main > aside details[open] > summary:not(:focus) {
|
|||
/**
|
||||
* Docs: Documentation
|
||||
*/
|
||||
#themes button.theme-switcher:first-of-type {
|
||||
--font-weight: bold;
|
||||
}
|
||||
#themes button.theme-switcher i {
|
||||
#themes button i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#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: 576px) {
|
||||
#customization figure {
|
||||
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);
|
||||
}
|
||||
|
|
@ -220,8 +216,8 @@ main > aside details[open] > summary:not(:focus) {
|
|||
#customization figure button.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);
|
||||
}
|
||||
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
|
||||
|
|
@ -234,39 +230,39 @@ main > aside details[open] > summary:not(:focus) {
|
|||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
#grid {
|
||||
#grids {
|
||||
--grid-spacing-vertical: 1rem;
|
||||
}
|
||||
#grid button {
|
||||
#grids button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
#grid button {
|
||||
#grids button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
#grid button svg {
|
||||
#grids button svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
}
|
||||
#grid .grid > * {
|
||||
#grids .grid > * {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--code-background-color);
|
||||
font-size: 87.5%;
|
||||
text-align: center;
|
||||
}
|
||||
#grid details {
|
||||
#grids details {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
#grid details svg {
|
||||
#grids details svg {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
|
@ -274,17 +270,9 @@ main > aside details[open] > summary:not(:focus) {
|
|||
grid-row-gap: 0;
|
||||
}
|
||||
|
||||
#modal button {
|
||||
--font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Typography
|
||||
*/
|
||||
h1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
|
@ -309,14 +297,14 @@ article > footer.code {
|
|||
|
||||
article pre,
|
||||
article pre code {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -359,37 +347,6 @@ section > pre {
|
|||
content: "Great";
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
dialog.example article {
|
||||
max-width: inherit;
|
||||
}
|
||||
dialog.example:not([open]), dialog.example[open=false] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog-is-open body > button {
|
||||
filter: blur(0.125rem);
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Navs
|
||||
*/
|
||||
|
|
@ -457,8 +414,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
border: 0.15rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
content: "";
|
||||
vertical-align: bottom;
|
||||
content: "";
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
.switcher i {
|
||||
|
|
@ -466,8 +423,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-style: normal;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.switcher:hover, .switcher:focus {
|
||||
|
|
@ -490,5 +447,3 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
right: calc(var(--spacing) + var(--scrollbar-width, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=pico.docs.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue