mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simpler cards, code and scroller

Browse source
This commit is contained in:
Lucas 2019-12-03 09:51:37 +07:00
parent 7c02958360
commit 772425bf2f
15 changed files with 36 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

41
css/pico.classless.css
View file

@ -284,26 +284,14 @@ section {
*/ */
figure { figure {
display: block; display: block;
margin-right: -1rem; margin: 0;
margin-left: -1rem;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
} }
figure figcaption { figure figcaption {
padding: 0.5rem 0;
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%;
padding: 0.5rem 1rem;
}
@media (min-width: 576px) {
figure {
margin-right: 0;
margin-left: 0;
}
figure figcaption {
padding: 0.5rem 0;
}
} }
/** /**
@ -496,19 +484,10 @@ mark {
blockquote { blockquote {
display: block; display: block;
margin: 3rem 0; margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem; padding: 1rem;
border-left: 0.25rem solid var(--muted-border); border-left: 0.25rem solid var(--muted-border);
} }
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer { blockquote footer {
margin-top: 0.75rem; margin-top: 0.75rem;
color: var(--muted-text); color: var(--muted-text);
@ -1004,20 +983,12 @@ kbd {
pre { pre {
display: block; display: block;
margin-right: -1rem; margin-bottom: 2rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background);
} }
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code { pre > code {
display: block; display: block;
padding: 0; padding: 0;
@ -1140,11 +1111,10 @@ details[open] summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin: 2rem; margin: 2rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow: hidden; overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background); background: var(--card-background);
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
} }
@ -1153,7 +1123,6 @@ article {
article { article {
margin: 2.5rem 0; margin: 2.5rem 0;
padding: 2.5rem; padding: 2.5rem;
border-radius: 0.25rem;
} }
} }

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

File diff suppressed because one or more lines are too long

41
css/pico.css
View file

@ -340,26 +340,14 @@ section {
*/ */
figure { figure {
display: block; display: block;
margin-right: -1rem; margin: 0;
margin-left: -1rem;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
} }
figure figcaption { figure figcaption {
padding: 0.5rem 0;
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%;
padding: 0.5rem 1rem;
}
@media (min-width: 576px) {
figure {
margin-right: 0;
margin-left: 0;
}
figure figcaption {
padding: 0.5rem 0;
}
} }
/** /**
@ -577,19 +565,10 @@ mark {
blockquote { blockquote {
display: block; display: block;
margin: 3rem 0; margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem; padding: 1rem;
border-left: 0.25rem solid var(--muted-border); border-left: 0.25rem solid var(--muted-border);
} }
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer { blockquote footer {
margin-top: 0.75rem; margin-top: 0.75rem;
color: var(--muted-text); color: var(--muted-text);
@ -1223,20 +1202,12 @@ kbd {
pre { pre {
display: block; display: block;
margin-right: -1rem; margin-bottom: 2rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background);
} }
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code { pre > code {
display: block; display: block;
padding: 0; padding: 0;
@ -1359,11 +1330,10 @@ details[open] summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin: 2rem; margin: 2rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow: hidden; overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background); background: var(--card-background);
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
} }
@ -1372,7 +1342,6 @@ article {
article { article {
margin: 2.5rem 0; margin: 2.5rem 0;
padding: 2.5rem; padding: 2.5rem;
border-radius: 0.25rem;
} }
} }

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

@ -280,26 +280,14 @@ section {
*/ */
figure { figure {
display: block; display: block;
margin-right: -1rem; margin: 0;
margin-left: -1rem;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
} }
figure figcaption { figure figcaption {
padding: 0.5rem 0;
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%;
padding: 0.5rem 1rem;
}
@media (min-width: 576px) {
figure {
margin-right: 0;
margin-left: 0;
}
figure figcaption {
padding: 0.5rem 0;
}
} }
/** /**
@ -492,19 +480,10 @@ mark {
blockquote { blockquote {
display: block; display: block;
margin: 3rem 0; margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem; padding: 1rem;
border-left: 0.25rem solid var(--muted-border); border-left: 0.25rem solid var(--muted-border);
} }
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer { blockquote footer {
margin-top: 0.75rem; margin-top: 0.75rem;
color: var(--muted-text); color: var(--muted-text);
@ -1000,20 +979,12 @@ kbd {
pre { pre {
display: block; display: block;
margin-right: -1rem; margin-bottom: 2rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background);
} }
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code { pre > code {
display: block; display: block;
padding: 0; padding: 0;
@ -1136,11 +1107,10 @@ details[open] summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin: 2rem; margin: 2rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 2rem 1rem; padding: 2rem 1rem;
overflow: hidden; overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background); background: var(--card-background);
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
} }
@ -1149,7 +1119,6 @@ article {
article { article {
margin: 2.5rem 0; margin: 2.5rem 0;
padding: 2.5rem; padding: 2.5rem;
border-radius: 0.25rem;
} }
} }

2
css/pico.fluid.classless.min.css vendored
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

25
css/pico.slim.css
View file

@ -279,26 +279,14 @@ body > footer {
*/ */
figure { figure {
display: block; display: block;
margin-right: -1rem; margin: 0;
margin-left: -1rem;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
} }
figure figcaption { figure figcaption {
padding: 0.5rem 0;
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%;
padding: 0.5rem 1rem;
}
@media (min-width: 576px) {
figure {
margin-right: 0;
margin-left: 0;
}
figure figcaption {
padding: 0.5rem 0;
}
} }
/** /**
@ -515,19 +503,10 @@ mark {
blockquote { blockquote {
display: block; display: block;
margin: 3rem 0; margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem; padding: 1rem;
border-left: 0.25rem solid var(--muted-border); border-left: 0.25rem solid var(--muted-border);
} }
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer { blockquote footer {
margin-top: 0.75rem; margin-top: 0.75rem;
color: var(--muted-text); color: var(--muted-text);

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

File diff suppressed because one or more lines are too long

22
docs/css/pico.docs.css
View file

@ -328,7 +328,7 @@ a[role=button] {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: -1rem; right: 0;
padding: .375rem .75rem; padding: .375rem .75rem;
border-radius: 0; border-radius: 0;
color: var(--primary-inverse); color: var(--primary-inverse);
@ -336,13 +336,6 @@ a[role=button] {
line-height: 1; line-height: 1;
} }
@media (min-width: 576px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
right: 0;
}
}
@media (min-width: 992px) { @media (min-width: 992px) {
[data-theme="invalid"]:before, [data-theme="invalid"]:before,
[data-theme="valid"]:before { [data-theme="valid"]:before {
@ -351,15 +344,14 @@ a[role=button] {
} }
} }
[data-theme="invalid"] pre, [data-theme="invalid"] code,
[data-theme="valid"] pre { [data-theme="valid"] code {
padding-top: 2rem; padding: 1rem 0;
padding-bottom: 2rem;
} }
[data-theme="invalid"]:before { [data-theme="invalid"]:before {
background: var(--invalid); background: var(--invalid);
content: 'Bulky'; content: 'Not so great';
} }
[data-theme="valid"]:before { [data-theme="valid"]:before {
@ -367,10 +359,6 @@ a[role=button] {
content: 'Great'; content: 'Great';
} }
section[title="love"] [data-theme="invalid"]:before {
content: 'Not so great';
}
/** /**
* Docs: Navs * Docs: Navs
*/ */

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

File diff suppressed because one or more lines are too long

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

@ -53,17 +53,13 @@ pre {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: -$spacing-gutter; right: 0;
padding: .375rem .75rem; padding: .375rem .75rem;
border-radius: 0; border-radius: 0;
color: var(--primary-inverse); color: var(--primary-inverse);
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
@media (min-width: map-get($breakpoints, "sm")) {
right: 0;
}
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
top: $spacing-gutter; top: $spacing-gutter;
right: $spacing-gutter; right: $spacing-gutter;
@ -71,9 +67,8 @@ pre {
} }
// Spacing for Valid & Invalid badge // Spacing for Valid & Invalid badge
pre { code {
padding-top: 2rem; padding: 1rem 0;
padding-bottom: 2rem;
} }
} }
@ -81,7 +76,7 @@ pre {
[data-theme="invalid"] { [data-theme="invalid"] {
&:before { &:before {
background: var(--invalid); background: var(--invalid);
content: 'Bulky'; content: 'Not so great';
} }
} }
@ -91,9 +86,3 @@ pre {
content: 'Great'; content: 'Great';
} }
} }
section[title="love"] [data-theme="invalid"] {
&:before {
content: 'Not so great';
}
}

6
scss/components/_card.scss
View file

@ -3,11 +3,10 @@
*/ */
article { article {
margin: $spacing-block; margin: $spacing-block 0;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter; padding: $spacing-block $spacing-gutter;
overflow: hidden; overflow: hidden;
border-radius: $round;
background: var(--card-background); background: var(--card-background);
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
@ -21,7 +20,6 @@ article {
margin: $spacing-block 0; margin: $spacing-block 0;
padding: $spacing-block; padding: $spacing-block;
} }
border-radius: $round;
} }
} }

8
scss/content/_code.scss
View file

@ -62,17 +62,11 @@ kbd {
pre { pre {
display: block; display: block;
margin-right: -$spacing-gutter; margin-bottom: $spacing-block;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter; padding: $spacing-block $spacing-gutter;
overflow-x: auto; overflow-x: auto;
background: var(--code-background); background: var(--code-background);
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
}
> code { > code {
display: block; display: block;
padding: 0; padding: 0;

9
scss/content/_typography.scss
View file

@ -250,18 +250,9 @@ mark {
blockquote { blockquote {
display: block; display: block;
margin: ($spacing-typography*2) 0; margin: ($spacing-typography*2) 0;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-gutter; padding: $spacing-gutter;
border-left: .25rem solid var(--muted-border); border-left: .25rem solid var(--muted-border);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
}
}
footer { footer {
margin-top: $spacing-typography/2; margin-top: $spacing-typography/2;
color: var(--muted-text); color: var(--muted-text);

17
scss/layout/_scroller.scss
View file

@ -5,25 +5,12 @@
// Wrapper to make any content responsive across all viewports // Wrapper to make any content responsive across all viewports
figure { figure {
display: block; display: block;
margin-right: -$spacing-gutter; margin:0;
margin-left: -$spacing-gutter;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
figcaption { figcaption {
padding: ($spacing-gutter/2) 0;
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%;
padding: ($spacing-gutter/2) $spacing-gutter;
}
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
margin-right: 0;
margin-left: 0;
figcaption {
padding: ($spacing-gutter/2) 0;
}
}
} }
} }