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

Merge branch 'dev' of https://github.com/picocss/pico into dev

Browse source
This commit is contained in:
KiranMantha 2021-12-31 12:34:12 +05:30
commit 002008996d
31 changed files with 3293 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

5
css/pico.classless.css
View file

@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -981,6 +980,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1081,6 +1081,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),

3
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

1
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

12
css/pico.css
View file

@ -23,6 +23,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -798,13 +799,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical);
}
hgroup {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
}
hgroup > * {
hgroup > *,
.headings > * {
margin-bottom: 0;
}
hgroup > *:last-child {
hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
@ -1163,6 +1167,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1263,6 +1268,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -19,10 +19,9 @@
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -951,6 +950,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1051,6 +1051,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),

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

12
css/pico.slim.css
View file

@ -26,6 +26,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
@ -727,13 +728,16 @@ ul ~ h6 {
margin-top: var(--typography-spacing-vertical);
}
hgroup {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
}
hgroup > * {
hgroup > *,
.headings > * {
margin-bottom: 0;
}
hgroup > *:last-child {
hgroup > *:last-child,
.headings > *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
@ -1091,6 +1095,7 @@ button[disabled],
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button]:not([href]),
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
@ -1191,6 +1196,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type=checkbox]):not([type=radio]),

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

1
css/themes/default.css
View file

@ -19,6 +19,7 @@
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {

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

8
docs/modal.html
View file

@ -27,7 +27,7 @@
&lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal
&lt;/<b>button</b>&gt;
@ -38,7 +38,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt;
@ -51,13 +51,13 @@
<i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel
&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm
&lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt;

8
docs/src/modal.html
View file

@ -98,7 +98,7 @@
<pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
&lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Launch demo modal
&lt;/<b>button</b>&gt;
@ -109,7 +109,7 @@
<i>aria-label</i>=<u>"Close"</u>&gt;
<i>class</i>=<u>"close"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
&lt;/<b>a</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
&lt;<b>p</b>&gt;
@ -122,13 +122,13 @@
<i>role</i>=<u>"button"</u>&gt;
<i>class</i>=<u>"secondary"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Cancel
&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
<i>role</i>=<u>"button"</u>
<i>data-target</i>=<u>"modal-example"</u>
<i>onClick</i>=<u>"toggleModal()"</u>&gt;
<i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
Confirm
&lt;/<b>a</b>&gt;
&lt;/<b>footer</b>&gt;

75
docs/src/typography.html
View file

@ -1,24 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html')
title="Typography"
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
canonical="typography.html"
}
${require('./_head.html') title="Typography" description="All typographic
elements are responsive, allowing text to scale gracefully across devices
and viewports." canonical="typography.html" }
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="typography-link"}
<div role="document">
<section id="typography">
<hgroup>
<h1>Typography</h1>
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
<h2>
All typographic elements are responsive, allowing text to scale
gracefully across devices and viewports.
</h2>
</hgroup>
<figure>
<table role="grid">
@ -109,38 +110,48 @@
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<footer class="code">
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
</footer>
</article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
<p>
Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
<code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
<code><i>margin-bottom</i></code> are collapsed and the
<code>:last-child</code> is muted.
</p>
<article aria-label="Hgroup example">
<hgroup>
<div class="headings">
<h2>Heading 2</h2>
<h3>Subtitle for heading 2</h3>
</hgroup>
</div>
<footer class="code">
<pre><code>&lt;<b>hgroup</b>&gt;
<pre><code>&lt;<b>hgroup</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre>
<pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
</footer>
</article>
<p>Inline text elements:</p>
<article aria-label="Inline text examples">
<div class="grid">
<div>
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
<p>
<em>Italic</em> <code>i</code> <code>em</code>
<code>cite</code>
</p>
<p><del>Deleted</del> <code>del</code></p>
<p><ins>Inserted</ins> <code>ins</code></p>
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@ -155,44 +166,46 @@
</div>
</div>
</article>
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<p>
Links come with <code>.secondary</code> and
<code>.contrast</code> styles.
</p>
<article aria-label="Links examples">
<a href="#" onclick="event.preventDefault()">Primary</a><br>
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
<a href="#" onclick="event.preventDefault()">Primary</a><br />
<a href="#" onclick="event.preventDefault()" class="secondary"
>Secondary</a
><br />
<a href="#" onclick="event.preventDefault()" class="contrast"
>Contrast</a
><br />
<footer class="code">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</footer>
</article>
<p>Blockquote:</p>
<article aria-label="Blockquote example">
<blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit
non. Nam at dui sit amet ipsum cursus ornare."
<footer>
<cite>- Phasellus eget lacinia</cite>
</footer>
</blockquote>
<footer class="code">
<pre><code>&lt;<b>blockquote</b>&gt;
<pre><code>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>

11
docs/typography.html
View file

File diff suppressed because one or more lines are too long

3
scss/_variables.scss
View file

@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
// .classless version if disabled
$enable-classes: true !default;
// Enable .grid class
$enable-grid: true !default;
// Enable transitions
$enable-transitions: true !default;

19
scss/content/_button.scss
View file

@ -195,13 +195,12 @@ input[type="reset"] {
}
// Button [disabled]
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: 0.5;
pointer-events: none;
}
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"]:not([href]),
a[role="button"][disabled] {
opacity: 0.5;
pointer-events: none;
}

1
scss/content/_form.scss
View file

@ -129,6 +129,7 @@ label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
// Blocks, 100%

38
scss/content/_typography.scss
View file

@ -181,18 +181,38 @@ ul {
}
// Heading group
hgroup {
margin-bottom: var(--typography-spacing-vertical);
@if $enable-classes == false {
hgroup {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
@if $enable-classes {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}

2
scss/layout/_grid.scss
View file

@ -1,4 +1,4 @@
@if $enable-classes {
@if ($enable-classes and $enable-grid) {
/**
* Grid
* Minimal grid system with auto-layout columns

10
scss/themes/default/_styles.scss
View file

@ -50,14 +50,18 @@
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
// Spacings .grid
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
@if ($enable-classes and $enable-grid) {
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
}
// Spacings for form elements and button
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight);
// Transitions
--transition: 0.2s ease-in-out;
}

3142
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff