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 {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin: 0;
padding: 0;
overflow-x: auto;
}
figure figcaption {
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;
}
color: var(--muted-text);
}
/**
@ -496,19 +484,10 @@ mark {
blockquote {
display: block;
margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem;
border-left: 0.25rem solid var(--muted-border);
}
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer {
margin-top: 0.75rem;
color: var(--muted-text);
@ -1004,20 +983,12 @@ kbd {
pre {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 2rem;
padding: 2rem 1rem;
overflow-x: auto;
background: var(--code-background);
}
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code {
display: block;
padding: 0;
@ -1140,11 +1111,10 @@ details[open] summary::after {
* Card (<article>)
*/
article {
margin: 2rem;
margin-right: -1rem;
margin-left: -1rem;
margin: 2rem 0;
padding: 2rem 1rem;
overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1153,7 +1123,6 @@ article {
article {
margin: 2.5rem 0;
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 {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin: 0;
padding: 0;
overflow-x: auto;
}
figure figcaption {
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;
}
color: var(--muted-text);
}
/**
@ -577,19 +565,10 @@ mark {
blockquote {
display: block;
margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem;
border-left: 0.25rem solid var(--muted-border);
}
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer {
margin-top: 0.75rem;
color: var(--muted-text);
@ -1223,20 +1202,12 @@ kbd {
pre {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 2rem;
padding: 2rem 1rem;
overflow-x: auto;
background: var(--code-background);
}
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code {
display: block;
padding: 0;
@ -1359,11 +1330,10 @@ details[open] summary::after {
* Card (<article>)
*/
article {
margin: 2rem;
margin-right: -1rem;
margin-left: -1rem;
margin: 2rem 0;
padding: 2rem 1rem;
overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1372,7 +1342,6 @@ article {
article {
margin: 2.5rem 0;
padding: 2.5rem;
border-radius: 0.25rem;
}
}

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

@ -280,26 +280,14 @@ section {
*/
figure {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin: 0;
padding: 0;
overflow-x: auto;
}
figure figcaption {
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;
}
color: var(--muted-text);
}
/**
@ -492,19 +480,10 @@ mark {
blockquote {
display: block;
margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem;
border-left: 0.25rem solid var(--muted-border);
}
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer {
margin-top: 0.75rem;
color: var(--muted-text);
@ -1000,20 +979,12 @@ kbd {
pre {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 2rem;
padding: 2rem 1rem;
overflow-x: auto;
background: var(--code-background);
}
@media (min-width: 576px) {
pre {
margin-right: 0;
margin-left: 0;
}
}
pre > code {
display: block;
padding: 0;
@ -1136,11 +1107,10 @@ details[open] summary::after {
* Card (<article>)
*/
article {
margin: 2rem;
margin-right: -1rem;
margin-left: -1rem;
margin: 2rem 0;
padding: 2rem 1rem;
overflow: hidden;
border-radius: 0.25rem;
background: var(--card-background);
box-shadow: var(--card-shadow);
}
@ -1149,7 +1119,6 @@ article {
article {
margin: 2.5rem 0;
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 {
display: block;
margin-right: -1rem;
margin-left: -1rem;
margin: 0;
padding: 0;
overflow-x: auto;
}
figure figcaption {
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;
}
color: var(--muted-text);
}
/**
@ -515,19 +503,10 @@ mark {
blockquote {
display: block;
margin: 3rem 0;
margin-right: -1rem;
margin-left: -1rem;
padding: 1rem;
border-left: 0.25rem solid var(--muted-border);
}
@media (min-width: 576px) {
blockquote {
margin-right: 0;
margin-left: 0;
}
}
blockquote footer {
margin-top: 0.75rem;
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;
position: absolute;
top: 0;
right: -1rem;
right: 0;
padding: .375rem .75rem;
border-radius: 0;
color: var(--primary-inverse);
@ -336,13 +336,6 @@ a[role=button] {
line-height: 1;
}
@media (min-width: 576px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
right: 0;
}
}
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
@ -351,15 +344,14 @@ a[role=button] {
}
}
[data-theme="invalid"] pre,
[data-theme="valid"] pre {
padding-top: 2rem;
padding-bottom: 2rem;
[data-theme="invalid"] code,
[data-theme="valid"] code {
padding: 1rem 0;
}
[data-theme="invalid"]:before {
background: var(--invalid);
content: 'Bulky';
content: 'Not so great';
}
[data-theme="valid"]:before {
@ -367,10 +359,6 @@ a[role=button] {
content: 'Great';
}
section[title="love"] [data-theme="invalid"]:before {
content: 'Not so great';
}
/**
* 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;
position: absolute;
top: 0;
right: -$spacing-gutter;
right: 0;
padding: .375rem .75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
line-height: 1;
@media (min-width: map-get($breakpoints, "sm")) {
right: 0;
}
@media (min-width: map-get($breakpoints, "lg")) {
top: $spacing-gutter;
right: $spacing-gutter;
@ -71,9 +67,8 @@ pre {
}
// Spacing for Valid & Invalid badge
pre {
padding-top: 2rem;
padding-bottom: 2rem;
code {
padding: 1rem 0;
}
}
@ -81,7 +76,7 @@ pre {
[data-theme="invalid"] {
&:before {
background: var(--invalid);
content: 'Bulky';
content: 'Not so great';
}
}
@ -91,9 +86,3 @@ pre {
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 {
margin: $spacing-block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
margin: $spacing-block 0;
padding: $spacing-block $spacing-gutter;
overflow: hidden;
border-radius: $round;
background: var(--card-background);
box-shadow: var(--card-shadow);
@ -21,7 +20,6 @@ article {
margin: $spacing-block 0;
padding: $spacing-block;
}
border-radius: $round;
}
}

8
scss/content/_code.scss
View file

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

9
scss/content/_typography.scss
View file

@ -250,18 +250,9 @@ mark {
blockquote {
display: block;
margin: ($spacing-typography*2) 0;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-gutter;
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 {
margin-top: $spacing-typography/2;
color: var(--muted-text);

17
scss/layout/_scroller.scss
View file

@ -5,25 +5,12 @@
// Wrapper to make any content responsive across all viewports
figure {
display: block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
margin:0;
padding: 0;
overflow-x: auto;
figcaption {
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;
}
}
color: var(--muted-text);
}
}